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

标题:有时候我们定义了一个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

猜你喜欢

转载自blog.csdn.net/luo1831251387/article/details/110959127