zoukankan      html  css  js  c++  java
  • 通过CSS3实现:鼠标悬停图片360度旋转效果

      效果很好玩,代码很简单:

      效果:

        鼠标放置在图片上:360度顺时针旋转

      鼠标离开图片:图片260度逆时针旋转

      

      只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果

      

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>鼠标悬停图片360度旋转效果</title>
    <style>
    .xwcms {
        width: 220px;
        height: 220px;
        margin: 0 auto;
        background: no-repeat url(%E6%8B%9B%E5%95%86/img/arrow.gif) 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;
    }
    .xwcms:hover {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
    
    </style>
    </head>
    <div class="xwcms">
    </div>
    <body>
    </body>
    </html>

      推荐一个神一样的网站,上面有各种特效:http://www.xwcms.net/

      以上

      END

  • 相关阅读:
    win7如何配置access数据源
    pcA降维算法
    今天的分类
    实现MFC菜单画笔画圆,并且打钩
    多个字符串输出,竖直输出
    端口重用
    安卓快速关机APP
    端口转发
    学习OpenCV
    求解数独
  • 原文地址:https://www.cnblogs.com/finalanddistance/p/8951884.html
Copyright © 2011-2022 走看看