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

程序员文章站 2022-06-19 16:14:31

标题：有时候我们定义了一个div盒子或者图片或其它标签，想让其一直旋转。效果：其实它会一直旋转的，就不放动图了，放张静图装装样子。实现：1.比如：定义一个div：

2.给盒子样式（定义了长、宽和背景图）： div{ width: 200px; height: 200px; background-image: url("disc.png"); ba...

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

效果：

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

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

本文地址：https://blog.csdn.net/luo1831251387/article/details/110959127