鼠标滑过图片旋转:

鼠标滑过图片旋转:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">  
            .keleyi {  
width: 100px;  
height: 100px;  
margin: 0 auto;  
background: no-repeat url("http://img.1985t.com/uploads/attaches/2017/12/141013-eSnS9sO.jpg") left top;  
-webkit-background-size: 100px 100px;  
-moz-background-size: 100px 100px;  
background-size: 100px 100px;  
-webkit-border-radius: 110px;  
border-radius: 110px;  
-webkit-transition: -webkit-transform 2s ease-out;  
-moz-transition: -moz-transform 2s ease-out;  
-o-transition: -o-transform 2s ease-out;  
-ms-transition: -ms-transform 2s ease-out;  
}  
.keleyi:hover {  
-webkit-transform: rotateZ(360deg);  
-moz-transform: rotateZ(360deg);  
-o-transform: rotateZ(360deg);  
-ms-transform: rotateZ(360deg);  
transform: rotateZ(360deg);  
}  
        </style>
</head>
<body>
<div class="keleyi"></div>  
</body>
</html>

阅读更多
个人分类: html5混合开发
上一篇鼠标滑过图片缩放:
下一篇鼠标滑过图片(文字)旋转变大:
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭