工作中用到，随手记录下！
<body>
<style>
.box{
width: 250px;
height: 250px;
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.bg{
width: 230px;
height: 230px;
background-image: url(./img/circular.png);
background-repeat: no-repeat;
background-size: 100%;
text-align: center;
line-height: 230px;
animation: rotate 10s linear infinite;
}
.text{
animation: rotate 10s linear infinite;
animation-direction: reverse;
}
@keyframes rotate{
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
<div class="box">
<div class="bg">
<div class="text">文本内容</div>
</div>
</div>
</body>效果图如下：
2866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
