在偶然事件，收到一个请求，就是画出一个类似这样的动画
<!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>
.card{
position: relative;
}
.card img {
width: 160px;
transition: all 1s;
transform-origin: 80px -200px;
transform: rotate(0deg);
position: absolute;
left: 50%;
}
</style>
</head>
<body>
<script>
(function func() {
setTimeout(()=>{
const list = document.querySelectorAll('.card img')
const length = list.length;
list.forEach((item, index) => {
item.style.transform = `rotate(${(index-length/2) * 3}deg)`;
})
},1000)
})()
</script>
<div class="card">
<img src="cardBack.png" >
<img src="cardBack.png" >
<img src="cardBack.png" >
<img src="cardBack.png" >
<img src="cardBack.png" >
<img src="cardBack.png" >
<img src="cardBack.png" >
<img src="cardBack.png" >
<img src="cardBack.png" >
<img src="cardBack.png" >
<img src="cardBack.png" >
</div>
</body>
</html>
扫一扫
1509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
