漂亮的时钟秒针旋转效果
设置旋转参考点 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/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/data/img/dmj/201903091552105405100741.jpg" alt="">
</div>
</body>
</html>
原文链接：https://www.qiquanji.com/post/7561.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
评论