<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        div{

            width:120px;

            height:120px;

            line-height:120px;

            margin: 20px;

            background-color: #5cb85c;

            float: left;

            font-size: 12px;

            text-align: center;

            color:#000;

        }

        /*效果一：360°旋转 修改rotate(旋转度数)*/

        .img1 {

            transition: All 0.4s ease-in-out;

            -webkit-transition: All 0.4s ease-in-out;

            -moz-transition: All 0.4s ease-in-out;

            -o-transition: All 0.4s ease-in-out;

        }

        .img1:hover {

            transform: rotate(360deg);

            -webkit-transform: rotate(360deg);

            -moz-transform: rotate(360deg);

            -o-transform: rotate(360deg);

            -ms-transform: rotate(360deg);

        }

        /*效果二：放大 修改scale(放大的值)*/

        .img2 {

            transition: All 0.4s ease-in-out;

            -webkit-transition: All 0.4s ease-in-out;

            -moz-transition: All 0.4s ease-in-out;

            -o-transition: All 0.4s ease-in-out;

        }

        .img2:hover {

            transform: scale(1.2);

            -webkit-transform: scale(1.2);

            -moz-transform: scale(1.2);

            -o-transform: scale(1.2);

            -ms-transform: scale(1.2);

        }

        /*效果三：旋转放大 修改rotate(旋转度数) scale(放大值)*/

        .img3 {

            transition: All 0.4s ease-in-out;

            -webkit-transition: All 0.4s ease-in-out;

            -moz-transition: All 0.4s ease-in-out;

            -o-transition: All 0.4s ease-in-out;

        }

        .img3:hover {

            transform: rotate(360deg) scale(1.2);

            -webkit-transform: rotate(360deg) scale(1.2);

            -moz-transform: rotate(360deg) scale(1.2);

            -o-transform: rotate(360deg) scale(1.2);

            -ms-transform: rotate(360deg) scale(1.2);

        }

        /*效果四：上下左右移动 修改translate(x轴,y轴)*/

        .img4 {

            transition: All 0.4s ease-in-out;

            -webkit-transition: All 0.4s ease-in-out;

            -moz-transition: All 0.4s ease-in-out;

            -o-transition: All 0.4s ease-in-out;

        }

        .img4:hover {

            transform: translate(0, -10px);

            -webkit-transform: translate(0, -10px);

            -moz-transform: translate(0, -10px);

            -o-transform: translate(0, -10px);

            -ms-transform: translate(0, -10px);

        }

    </style>

</head>

<body>

    <div class="img1">360°旋转 </div>

    <div class="img2">放大</div>

    <div class="img3">旋转放大</div>

    <div class="img4">上下左右移动 </div>

</body>

</html>

CSS3 动画-- 鼠标移上去，div 会旋转、放大、移动的更多相关文章

  1. 只要把鼠标移上Div方框，方框就自动顺时针旋转

    这是一个CSS3特效,IE下看不到效果.一个Div方框,在CSS3代码的作用下,只要把鼠标移上Div方框,方框就自动顺时针旋转.代码量不大,甚至有些简单,作为一个基础的CSS3实例,我想还是比较不错的 ...

  2. 用css3实现鼠标移进去当前亮其他变灰

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. 使用CSS3动画属性实现360°无限循环旋转【代码片段】

    使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: <div id="test"> <img src="/CSS3/img/ ...

  4. 鼠标移至div内部其他层时，触发mouseout

    话说有一个DIV元素,其内部有一个IMG元素和SPAN元素,不用理会这两个内部元素怎么布局,这不是我要讨论的重点. 为了实现一些特殊的效果,我需要利用TD的onmouseover和onmouseout ...

  5. 鼠标移到图片上图片放大【css3实例】

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 实现点击后创建div，若对div2秒无操作则将div隐藏，鼠标移上div让它不隐藏，移出div超过两秒则div隐藏

    $('.addLabel').on('click', function () { setTimeout(function(){ if(hoverflag==0){ $(".labelHide ...

  7. 商品鼠标移过去hover效果---图片放大1.1倍

    .home-standard-layout .middle-goods-list ul li:hover{ box-shadow: 0 0 10px gray;} .home-standard-lay ...

  8. 代码：　CSS3动画，简单示例（鼠标移上去后，背景图片旋转）

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.mi ...

  9. 鼠标移动上去，元素旋转；web前端鼠标经过图片凸起

    .trans-rotate{ -webkit-transition: transform .25s linear; -moz-transition: transform .25s linear; -o ...

随机推荐

  1. 识别jar的编译JDK版本

    解压jar,获取xxx.calss文件 dos命令行javap -verbose classname import java.io.InputStream; import java.io.PrintW ...

  2. java的Date日期使用

    import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; imp ...

  3. bzoj2442 修剪草坪——单调队列

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2442 设 f[i] 为答案,则有 f[i] = max { f[j] - s[j+1] } ...

  4. ChartCtrl源码剖析之——CChartGrid类

    CChartGrid类用来绘制波形区域中的表格,当绘制波形时波形就显示在这些表格上面.它处于该控件的区域,如下图所示: CChartGrid类的头文件. #if !defined(AFX_CHARTG ...

  5. windows下 zookeeper dubbo 安装+配置+demo 详细图文教程

    Java集群优化——dubbo+zookeeper构建 互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,Dubbo是一个分布式服务框架,在这 ...

  6. bzoj 5195: [Usaco2018 Feb]Directory Traversal【树形dp】

    注意到目录是一颗树结构,然后就简单了,预以1为根的处理出dis[u]为以这个点为根,到子树内的目录总长,si为子树内叶子数 第二遍dfs换根即可 #include<iostream> #i ...

  7. bzoj 4247: 挂饰【dp】

    bzoj上访问负下标会跑到奇怪的地方-- 其实可以滚动数组优化,但是我看能过就懒得改了 设f[i][j]为已经算了前i个挂饰,当前有j个空的钩子,转移就是f[i][j]=max(f[i-1][j],f ...

  8. apicloud运行机制

    1 首先在官网apicloud中,创建项目生成config.xml文件,预设风格. 2 将config.xml文件放在项目跟目录中,Vue项目,必须先打包生产dist文件, 3 本地或者云编译(官方工 ...

  9. 【转载】WebConfigurationManager和ConfigurationManager

    原文链接 今天在写程序时偶然发现有的示例代码中是用WebConfigurationManager获取web.config中的配置信息的,因为之前一直都是用的ConfigurationManager,所 ...

  10. java批处理、MySQL批处理

    e: cd MySQL\bin mysql -uroot -proot @pause MySQL批处理.bat e: cd JAVA\jdk1.8.0_77\bin javac Hello.java ...