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

作者: 魄56079591
来源: 51数据库
2021-08-25

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

效果：

其实它会一直旋转的，就不放动图了，放张静图装装样子。

实现：

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秒，可以该成其它秒数。

扩展：旋转的3D立方体相册：3d立体相册：https://blog.csdn.net/luo1831251387/article/details/111032274

推荐阅读