題外話：建議各位同學(xué)看到效果后，先自己寫(xiě)代碼實(shí)現(xiàn)，然后再看標(biāo)準(zhǔn)答案，會(huì)發(fā)現(xiàn)一些自己想不到的知識(shí)盲區(qū)哦~
文章內(nèi)容輸出來(lái)源：拉勾教育大前端就業(yè)集訓(xùn)營(yíng)
案例：通過(guò)CSS實(shí)現(xiàn)“卡包”特效
各位同學(xué)一定要自己先試試，然后再看答案，會(huì)收獲更多~
標(biāo)準(zhǔn)答案
<!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>
說(shuō)明：圖片是筆者自己隨便找的，大家也自己下載一些喜歡的圖片試試吧。
錯(cuò)誤答案
<!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>
說(shuō)明：
- 思路大體是對(duì)的“定位+每個(gè)圖片hover”，但是！別忘了定位是有壓蓋順序的，所以鼠標(biāo)移動(dòng)到圖片上時(shí)，其實(shí)只觸發(fā)了第六個(gè)img的hover。
- 要解決這個(gè)問(wèn)題，就需要使用父元素的hover，統(tǒng)一用父元素的鼠標(biāo)懸停事件，來(lái)控制6個(gè)子元素的旋轉(zhuǎn)。
- 這里有個(gè)知識(shí)點(diǎn)：事件捕獲時(shí)就是按照元素從上到下去執(zhí)行的，doucment->html->body->父級(jí)->子級(jí)->子級(jí)的子級(jí)。
- 所以，統(tǒng)一用父元素的某個(gè)事件，可以有效的解決子元素壓蓋的問(wèn)題。
前端文章匯總目錄
http://www.itdecent.cn/p/6d80dd616ff4
此處感謝小鹿老師，回答了我這個(gè)超綱的問(wèn)題~
結(jié)束語(yǔ)：一花一世界，一木一浮生，愿與諸君共勉
