CSS3 图片旋转特效

最新推荐文章于 2024-07-28 20:04:07 发布

鹿目达也

最新推荐文章于 2024-07-28 20:04:07 发布

阅读量1.1w

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/t1753867136/article/details/80405815

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>     
<html lang="en">     
<head>     
    <meta charset="UTF-8">     
    <title>图片旋转特效</title>     
    <style type="text/css">     
        #div{     
            width:280px;     
            height: 280px;     
            background: url(images/01.jpg) no-repeat;     /*背景图片*/
            border-radius:140px;     /*圆角*/
            -webkit-animation:run 5s linear 2s infinite; 
                /* 动画名称 一次的时间 速度曲线 什么时候开始 循环次数 */
        }     
        #div:hover{     
            -webkit-animation-play-state:paused;     
        }     /* 鼠标移动上去 暂停动画*/
        @keyframes run{     
            from{     
                -webkit-transform:rotate(360deg);     
            }     
            to{     
                -webkit-transform:rotate(0deg);     
            }     
        }
        /* 360-0 向左旋转 0-360 向右旋转 */
    </style>     
</head>     
<body>     
    <div id="div"></div>     
</body>     
</html>