“我正在参加「码上掘金挑战赛」详情请看：[[码上掘金挑战赛来了[！]]](码上掘金挑战赛来了，show出创意赢大奖！ - 掘金 (juejin.cn))
📢 哈罗！大家好，我是迪米卡恩，前端工程师，欢迎大家留言评论、点赞👍与关注➕、转发√ 你喜欢唱跳Rap，还有篮球吗？今天让我们用代码来实现。
用CSS再现坤坤的经典动作，当鼠标悬停时，触发动画，效果如下
哈哈，看起来是不是非常的帅气🔥🔥🔥？这个特效其实非常简单，并且特别适合新手学习使用，跟着我的节奏一起来欣赏吧。
一.flex布局知识介绍
弹性盒的基础知识
1.弹性盒的作用:控制子级元素在父级元素中的位置
2.弹性盒的概念:需要把属性设置在父级元素上,父级(容器)和子级(项目) 两个轴向(主轴和侧轴)
3.形成弹性盒的属性 display:flex
4.形成弹性盒的特点
-
在容器中默认的主轴方向是X轴,Y轴是侧轴,所有的子级元素默认都是沿着主轴排列
-
主轴和侧轴是相对的关系,默认X是主轴,侧轴是Y轴,修改Y轴是主轴,那么X轴就是侧轴
-
在弹性盒环境下所有的子级元素都可以直接设置宽高大小(不考虑元素类型)
-
居中方式:给单个子级元素设置margin:auto即可
注意
-
形成弹性盒设置了转换元素类型
-
不会脱离文档流、不会破坏网页布局、不存在高度塌陷的问题
-
定位属性和盒模型属性都是可以正常使用
-
浮动不可以用
添加在父级元素上的属性
改变主轴的默认方向
1.属性:flex-direction
2.属性值
-
row 默认值 X轴是主轴 Y轴是侧轴
-
column Y轴是主轴 X轴是侧轴
控制子级元素在父级元素上主轴的排列方式
1.属性:justify-content
2.属性值
-
flex-start 在主轴的开始位置
-
flex-end 在主轴的结束位置
-
center 在主轴的中间位置
-
space-between 两端对齐,其余空间自动分配
-
space-around 元素的左右间距都是相等的
-
space-evenly 所有的空间全部自动分配
控制子级元素在父级元素上侧轴的对齐方式
1.属性:align-items
2.属性值:
-
flex-start 在侧轴的开始位置
-
flex-end 在侧轴的结束位置
-
center 在侧轴的中间位置 当父级缺少高度，100%的高度是不起作用的，最好使用100vh来设置，这样就才可以使用此命令实现垂直居中
-
baseline/stretch 基线对齐/拉伸
弹性盒中换行属性
1.属性:flex-wrap
2.属性值
-
wrap 换行
-
nowrap 默认值不会换行
弹性盒换行之后行与行之间的间距，控制折行后的行间距
1.属性:align-content
设置子项在侧轴上的排列方式且行与行之间不会有间距，并且只能用于子项出现换行的情况(多行),在单行下是没有效果的.
2.属性值
-
flex-start 侧轴头部开始
-
flex-end 侧轴尾部开始
-
center 侧轴中间显示
-
space-between 两端对齐,其余侧轴空间自动分配
-
space-around 元素的左右间距都是相等的,先占据两边再平分
-
space-evenly 所有侧轴的空间全部自动分配
二.hover相关知识介绍
hover属于动态伪类选择器，介绍4种动态伪类选择器
①a:link {color: red;} /* 未访问的链接状态,必须给a，一般直接写a{color:red} */
②a:visited {color: green;} /* 已访问的链接状态,必须给a */
③a:hover {color: blue;} /* 鼠标滑过链接状态,可以随便给，可以是div:hover等 /*
④a:active {color: yellow;} /* 鼠标按下去时的状态,必须给a */
注意
-
如果想要使用伪类选择器,必须按照以上的书写方式进行使用
-
第三个hover表示鼠标移入悬停时候的效果,用的是最多的，hover的使用场景:
a.改变自己的状态:自身的选择器:hover{}
b.通过父级改变子级的状态:父级选择器:hover 子级选择器{}
c.通过兄弟元素控制后面一个兄弟元素的状态: 兄弟选择器:hover +后面一个兄弟
d.通过兄弟元素控制后面所有兄弟元素的状态: 兄弟选择器:hover ~后面所有兄弟 效果： 当鼠标悬停在“子级”时，子级字体变为绿色 当鼠标悬停在“哥哥”时，后面的所有弟弟字体变为红色
三.本案例的代码设计思路
由于不方便截图，需要详细代码的，请看 以下只截取部分代码用于展示设计思路
1.HTML结构搭建
在body标签中创建一个section标签。在section中创建5行 * 4个小块/行， 每100px * 100px为1个小方块（标签为article），每个1px * 1px的最小方块由span标签组成
2.CSS样式搭建
CSS第一部分，是首页样式优化，以及设置html和body的高为100%
body{ max-width: 1920px; margin: 0 auto; display: flex; } body,html{ height: 100%; }
第二部分，主要是对整个的section设置flex布局，并设置3D属性
`
section{
width: 400px;
height: 500px;
margin: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-evenly;
perspective: 1200px;
transform-style:preserve-3d;
}
第三部分，的对小方块设置宽高，同时也设置flex布局article{
width: 100px;
height: 100px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
align-content: center;
}第四部分，对最小的10px * 10pxarticle aside{
width: 10px;
height: 10px;
background-color: #dfe0f2;
border: 1px solid #a6a7b9;
box-sizing: border-box;
}第五部分，对aside设置变化属性 部分代码举例.sec1 aside{
transition: 0.8s 0.1s linear;
}第六部分，设置hover效果，根据头发、脸部、上衣、背带、鞋、地板的不同颜色，设置不同的hover效果 部分代码举例/* hover /
section:hover .sec3 aside:nth-child(64),
section:hover .sec3 aside:nth-child(65),
section:hover .sec3 aside:nth-child(66)
{
/ 头发颜色 */
background-color: #525055;
border: 1px solid #525055;
transform: translate3d(20px,30px,20px) rotate(720deg);
}
section:hover .sec3 aside:nth-child(96),
section:hover .sec3 aside:nth-child(97),
section:hover .sec7 aside:nth-child(5), section:hover .sec7 aside:nth-child(6)
{ /* 脸部颜色 */ background-color: #b3877c; transform: translate3d(20px,30px,20px) rotate(720deg); }
/* 第二行hover */ section:hover .sec6 aside:nth-child(7), section:hover .sec6 aside:nth-child(8), section:hover .sec6 aside:nth-child(9), section:hover .sec6 aside:nth-child(16), section:hover .sec6 aside:nth-child(17)
{ /* 上衣和鞋的颜色 */ background-color: #121119; border: 1px solid #000; transform: translate3d(20px,30px,20px) rotate(720deg); }
section:hover .sec6 aside:nth-child(10), section:hover .sec6 aside:nth-child(20), section:hover .sec6 aside:nth-child(30), section:hover .sec6 aside:nth-child(40)
{ /* 背带的颜色 / / background-color: #dbdbd9; */ background-color: #fff; transform: translate3d(20px,30px,20px) rotate(720deg); }
section:hover .sec10 aside:nth-child(46), section:hover .sec10 aside:nth-child(47), section:hover .sec10 aside:nth-child(48), section:hover .sec10 aside:nth-child(49), section:hover .sec10 aside:nth-child(50), section:hover .sec10 aside:nth-child(55)
{
/* 裤子的颜色 */
background-color: #796f7a;
transform: translate3d(20px,30px,20px) rotate(720deg);
}
section:hover .sec17 aside, section:hover .sec18 aside, section:hover .sec19 aside, section:hover .sec20 aside { /* 地板的颜色 */ background-color: #cbbdba; }
section:hover .sec17 aside:nth-child(1), section:hover .sec17 aside:nth-child(2), section:hover .sec17 aside:nth-child(11), section:hover .sec17 aside:nth-child(12), section:hover .sec17 aside:nth-child(21)
{ /* 地板移动 */ transform: translate(400px); }` 😊 以上就是我的分享，期待着大家的点赞👍与关注➕、转发评论。