使用css的动画属性实现一个粽子摇头动画
实现效果 在线观看 访问地址
代码
div{
width:200px;
margin: 200px auto;
}
.img{
width: 200px;
}
@-webkit-keyframes zy{
10% {
transform: rotate(15deg);
}
20% {
transform: rotate(-10deg);
}
30% {
transform: rotate(5deg);
}
40% {
transform: rotate(-5deg);
}
50%,100% {
transform: rotate(0deg);
}
}
/* 使用 */
.content {
animation: zy 2.5s;
/* 动画执行次数 infinite 无线循环*/
animation-iteration-count:5;
}
html
<body>
<div>
<img class="img" src="../assets/zongzi-icon8.png" alt="">
</div>
<script>
let img = document.querySelector(".img");
img.className = 'img content';
</script>
</body>
页面源码地址
源码地址
