<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@keyframes scroll {
0%{
/*transform: rotate(80deg);*/
background-color: yellow;
}
100%{
transform: rotate(360deg);
background-color: #2aabd2;
}
}
#d1{
border-radius: 50%;
width: 400px;
height: 400px;
border: 1px solid crimson;
/*display: flex;*/
/*justify-content: center;*/
position: relative;
}
#d2{
width: 2px;
height: 80px;
/*margin-top: 10px;*/
background-color: #0f0f0f;
position: absolute;
top: 116px;
left: 201px;
transform-origin: center bottom;
animation: scroll 3600s linear infinite;
}
#d3{
width: 2px;
height: 180px;
/*margin-top: 110px;*/
position: absolute;
top: 19px;
left: 200px;
background-color: #4cae4c;
/*设置旋转原点*/
/*transform-origin: 50% 100%;*/
transform-origin: center bottom;
animation-name: scroll;
animation-duration: 60s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
}
#d4{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #0f0f0f;
/*margin-top: 189px;*/
position: absolute;
top: 193px;
left: 197px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
</body>
</html>
CSS3表盘(animation+transform+position)
猜你喜欢
转载自blog.csdn.net/qq_39458856/article/details/82107268
今日推荐
周排行