css3的animation动画属性实现闹钟左右摇摆
生活随笔
收集整理的這篇文章主要介紹了
css3的animation动画属性实现闹钟左右摇摆
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鬧鐘震動</title>
<style>
#div1
{position: relative;height: 200px;width: 200px;margin: 100px;border: 1px solid black;
}#div2
{display: flex;justify-content: center;align-items: center;margin: 50px;width: 100px;height: 100px;border: 1px solid black;background-color: red;animation: myfirst 5s;
}
@keyframes myfirst
{0% {transform: rotate(-15deg);}2% {transform: rotate(15deg);}4% {transform: rotate(-18deg);}6% {transform: rotate(18deg);}8% {transform: rotate(-22deg);}10% {transform: rotate(22deg);}12% {transform: rotate(-18deg);}14% {transform: rotate(18deg);}16% {transform: rotate(-12deg);}18% {transform: rotate(12deg);}20% {transform: rotate(0deg);}
}</style>
</head><body><div id="div1"><div id="div2">鬧鐘</div>
</div></body>
</html>
總結
以上是生活随笔為你收集整理的css3的animation动画属性实现闹钟左右摇摆的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oppo android多大内存,OPP
- 下一篇： SpaceNet 6: Dataset