当前位置:首页 > 网页特效 > css样式 >

hTML5 360图片旋转特效

时间:2014-05-27 08:39 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • 一个用HTML5/css3写成的图片旋转特效,鼠标放上后图片就开始不停的旋转,对CSS3动画效果感兴趣的,更不可错过哦,用CSS3实现动画效果很不错的范例。
  • <style>
    * {
    margin:0;
    padding:0;
    list-style:none;
    }
    body {
    background:#1F1F1F;
    }
    .zzsc {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    background: no-repeat url("/jscss/demoimg/201405/author.jpg") left top;
    -webkit-background-size: 220px 220px;
    -moz-background-size: 220px 220px;
    background-size: 220px 220px;
    -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;
    }
    .zzsc:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
    }
    </style>
由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-css/8065.html

css样式下载排行

最新文章