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

最新推荐文章于 2024-09-08 15:48:34 发布

geniusbluesky

最新推荐文章于 2024-09-08 15:48:34 发布

阅读量3.3k

点赞数 3

文章标签： css html js less css3

本文链接：https://blog.csdn.net/geniusbluesky/article/details/108279178

版权

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