主要的原理是用伪类":hover"在鼠标悬停在指定元素上方时，执行它里面的内容，再借助过度"transition"的效果，最终实现动画。
<!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>
body {
background-color: green;
}
.s {
width: 420px;
height: 470px;
margin: 200PX auto;
}
.s1 {
transform: translate(50px, 70px) rotate(-902deg);
transition: all ease-in 1s;
}
.s2 {
transform: translate(90px, 65px) rotate(182deg);
transition: all ease-in 1s;
}
.s3 {
transform: translate(564px, 706px) rotate(-194deg);
transition: all ease-in 1s;
}
.s4 {
transform: translate(291px, 87px) rotate(-156deg);
transition: all ease-in 1s;
}
.s5 {
transform: translate(793px, -59px) rotate(-497deg);
transition: all ease-in 1s;
}
.s6 {
transform: translate(-291px, 871px) rotate(-135deg);
transition: all ease-in 1s;
}
.s7 {
transform: translate(371px, 877px) rotate(-61deg);
transition: all ease-in 1s;
}
.s8 {
transform: translate(391px, -897px) rotate(185deg);
transition: all ease-in 1s;
}
.s9 {
transform: translate(-21px, -87px) rotate(-165deg);
transition: all ease-in 1s;
}
.s:hover img {
transform: translate(0px, 0px) rotate(0deg);
}
</style>
</head>
<body>
<div class="s">
<img class="s1" src="./images/shield_1_01.png" alt="">
<img class="s2" src="./images/shield_1_02.png" alt="">
<img class="s3" src="./images/shield_1_03.png" alt="">
<img class="s4" src="./images/shield_1_04.png" alt="">
<img class="s5" src="./images/shield_1_05.png" alt="">
<img class="s6" src="./images/shield_1_06.png" alt="">
<img class="s7" src="./images/shield_1_07.png" alt="">
<img class="s8" src="./images/shield_1_08.png" alt="">
<img class="s9" src="./images/shield_1_09.png" alt="">
</div>
</body>
</html>
1634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
