用animation实现钟表动画
作者:互联网
HTML部分,只需要存放三个图片就可以了
<div class="clock"> <div class="sec"></div> <div class="min"></div> <div class="hour"></div> </div>
CSS部分
<style> @keyframes secrun{ 0%{ transform: rotate(180deg); } 100%{ transform: rotate(540deg); } } @keyframes minrun{ 0%{ transform: rotate(180deg); } 100%{ transform: rotate(540deg); } } .clock{ background-image: url(clock.png); background-repeat: no-repeat; width: 512px; height: 512px; position: relative; } .sec{ background-image: url(second.png); background-repeat: no-repeat; width: 16px; height: 278px; position: absolute; top: 180px; left: 247px; transform: rotate(180deg); transform-origin: center 76px; z-index: 3; animation: secrun 60s steps(60,end) infinite; } .min{ background-image: url(minute.png); background-repeat: no-repeat; width: 32px; height: 218px; position: absolute; top: 240px; left: 239px; transform: rotate(180deg); transform-origin: center 16px; z-index: 2; animation: minrun 3600s steps(60,end) infinite; } .hour{ background-image: url(hour.png); background-repeat: no-repeat; width: 32px; height: 148px; position: absolute; top: 180px; left: 238px; transform: rotate(180deg); transform-origin: center 46px; z-index: 1; } </style>
标签:动画,repeat,180deg,image,transform,animation,background,钟表,rotate 来源: https://www.cnblogs.com/wangzheng98/p/11167831.html