CSS循环旋转图片

前言

使用纯CSS以及CSS+JavaScript两种方式，对图片实现类似于网易云唱片旋转功能。

附加知识：背景颜色渐变功能，提升整体美观性。

纯CSS方式

功能介绍：在页面打开后0.5秒后自动播放图片旋转，鼠标经过图片时旋转停止，鼠标离开后回复旋转功能。

效果展示：

HTML部分

实例代码：

<div class="box">
    <div class="tape">
        <img src="网易云旋转/img.png " alt="">
    </div>
</div>

CSS部分

实例代码：

        /*清除内外边距*/
        *{
            padding: 0;
            margin: 0;
        }

        /*最外层盒子属性*/
        .box{
            position: relative; /*该盒子为相对定位，为后续tape盒子的中间定位提供条件*/
            width: 500px;
            height: 300px;
            border-radius: 10px; /*设置元素的外边框圆角*/
            overflow: hidden;  /*溢出隐藏，该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位*/
            margin: 100px auto;
            background-color:pink;
        }
         /*tape盒子属性*/
        .tape {
            position: absolute;  /*tape盒子设置为绝对定位*/

            /*使tape盒子在box盒子的正中间*/
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);

        }

           /*自定义旋转动画，从0°转到360°*/
        @keyframes rotate {
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }

        .tape img{
            width: 150px;
            border-radius: 75px;  /*设置元素的外边框圆角*/

            /*animation为动画*/
            animation-name: rotate ;   /*调用名为rotate的动画*/
            animation-duration: 5s;  /*动画播放完毕需时长为5秒*/
            animation-timing-function: linear;  /*动画速度曲线：linear表示动画从头到尾的速度是相同的。*/
            animation-play-state: running;  /*动画运动状态为running，表示在运行*/
            animation-iteration-count: infinite;  /*infinite为无限次循环播放*/
            animation-delay: 0.5s;  /*动画何时开始，该处设为页面打开后0.5秒开始播放*/

        }

     

        /*使用伪类选择器，鼠标在img上时触发停止功能*/
        .tape img:hover{
            animation-play-state: paused;  /*动画运动状态为paused，表示当前停止播放*/
        }

CSS+JavaScript方式

功能介绍：设置两个按钮控制旋转功能的开始与结束，点击开始按钮图片开始旋转，点击结束按钮图片旋转暂停。

HTML部分

实例代码：

<div class="box">
    <div class="tape">
        <img src="img.png " alt="">
    </div>

    <button class="start">
        开始
    </button>

    <button class="end">
        结束
    </button>

</div>

CSS部分

实例代码：

 *{
        padding: 0;
        margin: 0;
    }
    .box{
        position: relative;
        width: 500px;
        height: 300px;
        overflow: hidden;
        margin: 100px auto;
        border-radius: 10px;
        background-color:pink;
    }

    .tape {
        margin-left: 170px;
    }

    .tape img{
        width: 150px;
        margin-top: 20px;
        border-radius: 75px;
    }



    @keyframes rotate {
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }

    }
     button{
        float: left;
        width: 100px;
        height: 50px;
        background-color:transparent;/*按钮背景为透明*/
        border:1px solid #5e5d5d;
        letter-spacing: 5px;/*字间距离*/
        text-align: center  ;/*文字居中*/
        border-radius: 20px;
        box-shadow: 1px 1px 5px grey; /*盒子阴影*/
    }

    /*使用伪类选择器，鼠标在按钮上时，按钮上升2px*/
    button:hover{
        transform: translate(0px ,-2px);
    }
    .start{
        margin:30px 100px;
    }
    .end{
        margin-top:30px;
    }

JS部分

实例代码：

<script>
     // 获取实例对象
    const tape=document.querySelector(".tape img")
    const start=document.querySelector(".start")
    const end=document.querySelector(".end")


   // 对实例对象start按钮进行监听，如监听到点击行为，则触发
    start.addEventListener("click",function (){
        tape.style.animation='rotate  5s linear 0s infinite running'//添加动画以及动画属性，动画开始播放
    })

    end.addEventListener("click",function (){
        tape.style.animation='rotate  5s linear 0s infinite paused'//动画停止

    })
</script>

附加：背景渐变（以CSS+JavaScript方式为例）

说明：背景颜色自动变换，可由图1自动过度到图2，因视频展示不便，故不过多的展示。

注意：在css处添加即可，增加内容为：1、背景渐变动画；2、在.box类 处增加颜色渐变，改变背景大小以及动画调用内容。

实例代码：

 .box{
        position: relative;
        width: 500px;
        height: 300px;
        overflow: hidden;
        margin: 100px auto;
        border-radius: 10px;
        background-color:pink;


 /*背景颜色线性渐变  background: linear-gradient(direction, color-stop1, color-stop2, ...);*/
        background:linear-gradient(145deg,orange,blue,purple);
        background-size: 1000%;
        animation: bgc_change 8s   infinite ; /*调用渐变动画，时长8秒，无限次循环*/
    }

    /*背景渐变动画*/
    @keyframes bgc_change {
        0%{
            background-position: 10%,50%;
        }
        50%{
            background-position: 25%,0%;
        }
        75%{
            background-position: 30%,0%;
        }

        100%{
            background-position: 0%,0%;
        }
    }