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

  • 相关阅读:
    第一课:神经网络与机器学习
    自然语言基础之分词、标注、命名实体识别
    工程能力-语言-框架
    二叉树
    spark入门
    微平台推荐系统介绍(基于java)
    简历项目的梳理和面试准备
    统计学习方法李航学习笔记
    NopCommerce fluent validation使用
    NopCommerce支持多语言
  • 原文地址:https://www.cnblogs.com/finalanddistance/p/8951884.html
Copyright © 2011-2022 走看看