html标签盒子图片一直不停旋转 html+css

标题:有时候我们定义了一个div盒子或者图片或其它标签,想让其一直旋转。

效果:

html标签盒子图片一直不停旋转 html+css
其实它会一直旋转的,就不放动图了,放张静图装装样子。
html标签盒子图片一直不停旋转 html+css

实现:

1.比如:定义一个div:

  <div></div>

2.给盒子样式(定义了长、宽和背景图):

 div{
            width: 200px;
            height: 200px;
            background-image: url("disc.png");
            background-size: 100% 100%;
        }

3.css添加 animation-direction属性;

div{
            width: 200px;
            height: 200px;
            background-image: url("disc.png");
            background-size: 100% 100%;

            animation: move 5s linear infinite;
        }

        @keyframes move{
             
             0%{
                 transform: rotate(0deg);
             }
             100%{
                 transform: rotate(360deg);
             }
        }

注意:上面的5s是定义了转一圈是5秒,可以该成其它秒数。

上一篇:盒模型——Five


下一篇:CSS布局(一)- Grid布局