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

利用伪元素实现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);}
}