漂亮的时钟秒针旋转效果
设置旋转参考点 origin原点，起点 。图片默认旋转的中心点在图片的中间，要改变指针从尾部开始 水平方向0%，垂直方向50% 写像素也可以
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ color: #6C6C6C; } #uert{ width: 500px; height: 500px; border: 1px solid blue; margin: 50px auto; background: url(https://www.qiquanji.com/mip/data/img/dmj/201903091552105406154468.jpg) no-repeat ; /*background-size: 530px 530px;*/ background-size: 100% 100% ; position: relative; /*加阴影*/ box-shadow: 10px 10px 10px rgba(0,0,0,0.4); border-radius: 50%; } #uert img{ position: absolute; left: 240px; top: 240px; display: block; width: 200px; height: 50px; animation: ujt 5s linear infinite; /*origin原点，起点;*/ transform-origin: 10% 50%; } @keyframes ujt{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } </style> </head> <body> <div id="uert"> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903091552105405100741.jpg" alt=""> </div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知