vue 利用伪元素实现div实现背景图旋转 div内容不旋转

Posted 2023-03-14

参考技术A 利用伪元素实现div实现背景图旋转
原样式设定
.circle_data
width: 200px;
height: 200px;
color:#FFFFFF;
text-align: center;
vertical-align: middle;
z-index: 999;
position: relative;
overflow: hidden;


伪元素设置
.circle_data::before
content: "";
position: absolute;
width: 180px;
height: 180px;
top: 3%;
left: 3%;
z-index: -1;
background: url(../../../assets/gird/analysislayout/assess/images/circle.png) no-repeat;
background-size: cover;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 10s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 10s;
-webkit-animation: rotate 10s linear infinite;
-moz-animation: rotate 10s linear infinite;
-o-animation: rotate 10s linear infinite;
animation: rotate 10s linear infinite;


旋转
@keyframes rotate
0%-webkit-transform:rotate(0deg);
25%-webkit-transform:rotate(90deg);
50%-webkit-transform:rotate(180deg);
75%-webkit-transform:rotate(270deg);
100%-webkit-transform:rotate(360deg);