欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-07 22:02:26
标题:有时候我们定义了一个div盒子或者图片或其它标签,想让其一直旋转。效果:其实它会一直旋转的,就不放动图了,放张静图装装样子。实现:1.比如:定义一个div:
2.给盒子样式(定义了长、宽和背景图): div{ width: 200px; height: 200px; background-image: url("disc.png"); ba...

标题:有时候我们定义了一个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秒,可以该成其它秒数。

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

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