您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 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>
    hTML5 360图片旋转特效由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/csstx/8065.html
    标签:网站源码