需求
图片旋转,内容不旋转
效果
.card{
content: "";
width: 200px;
height: 200px;
position: fixed;
border-radius: 50%;
box-shadow: 0 0 4px #E4E7ED;
border: 2px solid #E4E7ED;
}
.card::after{
content: "";
position: fixed;
z-index: 1;
background: url(./light.png) 0px 0px no-repeat;
background-size: cover;
transform: rotate(180deg);
width: 200px;
height: 200px;
animation: rotate 10s linear infinite;
}
@keyframes rotate{
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}