1-2-11 【实战】CSS实现卡包特效
2020-11-09 本文已影响0人
Liyager
题外话：建议各位同学看到效果后，先自己写代码实现，然后再看标准答案，会发现一些自己想不到的知识盲区哦~
文章内容输出来源：拉勾教育大前端就业集训营
案例：通过CSS实现“卡包”特效
各位同学一定要自己先试试，然后再看答案，会收获更多~
标准答案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
position: relative;
width: 250px;
height: 187px;
/* border: 1px solid; */
margin: 350px auto;
}
div img{
position: absolute;
left: 0px;
top: 0px;
width: 250px;
height: 187px;
transition: all 0.5s linear 0s;
transform-origin: right top;
}
div:hover :nth-child(1){
transform: rotate(60deg);
}
div:hover :nth-child(2){
transform: rotate(120deg);
}
div:hover :nth-child(3){
transform: rotate(180deg);
}
div:hover :nth-child(4){
transform: rotate(240deg);
}
div:hover :nth-child(5){
transform: rotate(300deg);
}
div:hover :nth-child(6){
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>
<img src="cat01.jpeg" alt="">
<img src="cat02.jpg" alt="">
<img src="cat03.jpeg" alt="">
<img src="cat04.jpg" alt="">
<img src="cat05.jpg" alt="">
<img src="cat06.jpg" alt="">
</div>
</body>
</html>
说明：图片是笔者自己随便找的，大家也自己下载一些喜欢的图片试试吧。
错误答案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
position: relative;
width: 250px;
height: 187px;
/* border: 1px solid; */
margin: 350px auto;
}
div img{
position: absolute;
left: 0px;
top: 0px;
width: 250px;
height: 187px;
transition: all 0.5s linear 0s;
transform-origin: right top;
}
.img1:hover{
transform: rotate(60deg);
}
.img2:hover{
transform: rotate(120deg);
}
.img3:hover{
transform: rotate(180deg);
}
.img4:hover{
transform: rotate(240deg);
}
.img5:hover{
transform: rotate(300deg);
}
.img6:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>
<img src="cat01.jpeg" class="img1">
<img src="cat02.jpg" class="img2">
<img src="cat03.jpeg" class="img3">
<img src="cat04.jpg" class="img4">
<img src="cat05.jpg" class="img5">
<img src="cat06.jpg" class="img6">
</div>
</body>
</html>
说明：
- 思路大体是对的“定位+每个图片hover”，但是！别忘了定位是有压盖顺序的，所以鼠标移动到图片上时，其实只触发了第六个img的hover。
- 要解决这个问题，就需要使用父元素的hover，统一用父元素的鼠标悬停事件，来控制6个子元素的旋转。
- 这里有个知识点：事件捕获时就是按照元素从上到下去执行的，doucment->html->body->父级->子级->子级的子级。
- 所以，统一用父元素的某个事件，可以有效的解决子元素压盖的问题。
前端文章汇总目录
https://www.jianshu.com/p/6d80dd616ff4
此处感谢小鹿老师，回答了我这个超纲的问题~
结束语：一花一世界，一木一浮生，愿与诸君共勉
