css动画小球摆动

筑码追梦

于 2024-06-23 17:26:01 发布

阅读量40

点赞数

文章标签： css css3 前端

原文链接：https://segmentfault.com/a/1190000017104127

版权

在这里插入代码片

.sphere { width: 60px; height: 60px; background: #9485FD; border-radius: 100%; margin: 280px auto; background: radial-gradient(circle at top center, #c6bff6, #6959d8, #372a91); transform-origin: center -200px; animation: clock 4s infinite linear; position: relative; }

.sphere::before {
content: “”;
position: absolute;
bottom: 100%;
left: 50%;
width: 1px;
height: 200px;
border-left: 1px #9485FD dashed;
}

@keyframes clock {
0% {
transform: rotate(0deg)
}
25% {
transform: rotate(30deg)
}
50% {
transform: rotate(0deg)
}
75% {
transform: rotate(-30deg)
}
100% {
transform: rotate(0deg)
}
}