2021年的最后一周：实现好玩的登录效果+炸个新年🎆吧(附加flex属性和CSS动画整理)本周的周周技能树点亮：css

前言

为啥想在年末复盘下这个登录动效呢？

因为这个点击三张图片实现登录跳转内容页的动效是我大学生活里通过前端技术第一次把自己和别人的想法变现的小成品，可以说是我和前端结缘的起点吧。当时觉得“哇塞真酷”的效果可能现在的我看来实现起来其实十分简单，但是背后所运用到的知识却会一直贯穿我的职业生涯。

所以在2021年末这样的一个结束节点，想用我的起点作为一个收尾。

话不多说，感兴趣的话我们一起来看看这个效果的实现及背后的知识点吧。

关键词：弹性布局、flex属性、CSS动画

效果预览

Screen Recording 2021-12-28 at 4.44.54 PM.gif

🤔效果分析

1.屏幕宽度不发生改变时，图片盒子按从左到右从上到下的顺序排满父元素空间；

2.当我们开始缩放屏幕宽度时，图片盒子大小随着我们的缩放改变，但是同时仍然满足第一条的从左到右从上到下的顺序排满父元素空间；

3.鼠标移动（hover）到对应图片盒子上可以看到图片盒子有一个相应的放大动效且边框为橙色;

4.被点击的图片盒子由橙色框变绿色框，成功点亮三个盒子后跳转到内容页面。

结合上述功能分析，我们可以总结出完成这样一个让人眼前一亮的登录效果背后对应的需求与需求对应的知识技能点：

html层面

我们可以采用一个大盒子套图片盒子，图片盒子套图片的结构来实现基础代码，这里选择用无序排列ul标签作为大盒子，嵌套列表项li标签作为图片盒子，li内部盛放该盒子对应的图片来增加代码的可读性。

css层面

1、2条效果实现

请出我们今天的主角flex属性，我们将大盒子ul(images)设置为弹性盒子属性=>display:flex，来实现弹性布局（我最开始学前端的时候很喜欢这个布局，因为觉得很灵活，可以利用这种布局实现很多很酷的效果，flex即flexible：有弹性的灵活的，文章后半部分会详细介绍这个属性，这里会简要概述一下）。

与此同时我们的图片盒设置flex属性为flex:1 1 109px;，flex-wrap属性为flex-wrap: wrap。

flex:flex-grow flex-shrink flex-basis，默认值为0 1 auto。后两个属性可选。

flex-grow(定义项目的放大比例，默认为0；如果存在剩余空间，也不放大)

flex-shrink(定义项目的缩小比例，默认为1。即如果空间不足，该项目将缩小)

flex-basis(定义了在分配多余空间之前，项目占据的主轴空间main size)的缩写

这里我们在使用上述三属性前，我们首先要清楚两个概念：什么是主轴和剩余空间：
- 具有flex环境的父容器，通常是有一条主轴和一条侧轴，默认情况下，主轴就是水平从左向右，侧轴是垂直从上到下
- 剩余空间 = 父元素宽度 - 所有子元素宽度的和（如图示，图源来自简书作者锦锦_janeflex:1及flex取值的理解）
那么，这个例子里我们的剩余空间是大盒子ul在水平从左向右方向上的可用空间。

这里我们将每一个图片盒子的flex-grow(flex-shrink)设置为1，意味着在大盒子有剩余空间的情况下每一个图片盒子的放大(缩小)比例是一致的。对标1、2效果分析，图片盒子大小能随着屏幕缩放自适应改变。而flex-basis设置成109px，即分配剩余空间之前，每一个图片盒子占据的宽度为109px。
flex-wrap，flex-wrap 属性用于指定弹性盒子的子元素换行方式。

flex-wrap可取值：nowrap/wrap/wrap-reverse;

nowrap 是flex-wrap的默认值，弹性容器为单行。该情况下图片盒子可能会溢出大盒子。这里我们使用wrap，即弹性容器为多行，这样大盒子能实现自行断行。

除此之外，我们还需要将图片盒子设置为相对定位，图片盒子内部的图片设置为绝对定位，才能实现图片是相对于图片盒子大小的缩放。如果你对相对定位和绝对定位的概念不是很熟悉，可以看看我的这一篇文章——周周技能树点亮：css+js点亮万圣节小南瓜(附加：css定位机制整理)，或者在网上检索其他资料前去了解。

3、4条效果实现

鼠标移动（hover）到对应图片盒子li上触发li的hover CSS选择器，让对应图片盒子有一个放大的动效zoomIn并实现图片放大为原来的120%，并且边框为橙色，实现效果3；

这里的zoomIn效果我们设定为从透明变至不透明，且最开始的长宽均设置为原来的0.3，动画最后长宽均设置为原来的1.2倍，动画时长1秒，达到视觉上较好的放大效果。

以及别忘记了还要写点击之后的绿色边框样式用来实现效果4。

js层面

对应上述效果分析的4，识别到三个盒子被点击之后我们需要触发跳转，并且点击之后图片盒子要变成绿色框框；也就是说，我们需要监听所有图片盒子的点击事件，每个盒子被成功点击之后触发绿色框框属性，并且一旦匹配到三个框被点击就跳转。

OK，分析完了，让我们把想法变现吧！

话不多说，放码过来

html部分

<ul class="images" id="login-by-image">
<!-- 记得放长宽一致的正方形图片，以及请替换成你自己的图片路径(建议多放一些便于观察缩放效果)-->
<li><img src="images/1441A4F3-EC71-433A-BACE-92C86632CAA8.png"></li>

<li><img src="images/0447FC44-849B-47DB-84C0-5A2F839544A6.png"></li>

<li><img src="images/1441A4F3-EC71-433A-BACE-92C86632CAA8.png"></li>
<!-- ……-->
</ul>

css部分

/* 大盒子ul为弹性盒子，并且能自行断行 */
.login .images {
    padding: 10px 0 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap
}
/* 图片盒子li缩放比例均为1，没有剩余空间时主轴方向上占据109px，同时为相对定位 */
.login .images li {
    flex: 1 1 109px;
    list-style: none;
    border: 1px solid transparent;
    position: relative;
}
/* 鼠标移动至图片盒子后图片的效果：为绝对定位，相对于图片盒子大小变为原来的120%，
    并且避免被覆盖z-index属性设置为10 */
.login .images li:hover img {
    position: absolute;
    width: 120%;
    height: 120%;
    top: -12%;
    left: -12%;
    z-index: 10;
    /* 橙色边框 */
    border: 3px solid #ff8c01;
    /* 使用动效动效zoomIn，且持续时间为1s */
    animation: zoomIn 1s
}
/* 选中li时，边框为绿色 */
.login .images li.selected {
    border: 3px solid #88bc00;
}
/* 让图片占满图片盒子 */
.login .images li img {
    width: 100%;
    height: 100%
}

/* 鼠标移动至图片盒子放大动效 */
@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        /* 定义 3D 缩放转换,即x,y,z轴上均缩小为原来的0.3 */
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 1
    }
}

js部分

// 哈哈，这里使用的是虽然略古早但很强大的jQuery库完成的图片盒子的点击识别与绿框样式触发
$('#login-by-image li').off('click').on('click', function () {
    // 通过找到带有selected的li标签获取已点击的所有项
    const selectedList = $('li.selected');
     // 判断已点击的的项目是否小于2，小于2的话为点击的盒子切换为selected样式
    if (selectedList.length < 2) {
        $(this).toggleClass('selected');
    } else {
         // 否则实现页面的跳转
        window.location = "practiceHome.html";
    }

    return false;
})