纯HTML5+CSS3制作图片旋转

2020-05-02 08:14:26易采站长站整理

此实例可以应用到许多项目中,很实用,希望大家可以掌握。

效果图如下:

这个效果实现起来其实并不困难,代码清单如下:

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>     
<html lang="en">     
<head>     
    <meta charset="UTF-8">     
    <title>Document</title>     
    <style type="text/css">     
        #liu{     
            width:280px;     
            height: 279px;     
            background: url(shishi.png) no-repeat;     
            border-radius:140px;     
            -webkit-animation:run 6s linear 0s infinite;     
        }     
     
        #liu:hover{     
            -webkit-animation-play-state:paused;     
        }     
     
     
        @-webkit-keyframes run{     
            from{     
                -webkit-transform:rotate(0deg);     
            }     
            to{     
                -webkit-transform:rotate(360deg);     
            }     
        }     
     
    </style>     
</head>