<!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. POJ - 1470 Closest Common Ancestors（离线Tarjan算法）

    1.输出测试用例中是最近公共祖先的节点,以及这个节点作为最近公共祖先的次数. 2.最近公共祖先,离线Tarjan算法 3. /* POJ 1470 给出一颗有向树,Q个查询 输出查询结果中每个点出现次 ...

  2. 【POJ 3107】 Godfather

    [题目链接] 点击打开链接 [算法] 这题描述有些繁琐,先简化一下题意 : 对于一棵无根树,删除一个节点,使得其余的联通块中,最大的联通块最小 那么,这题就很好做了 对这棵树进行一遍DFS,求出每个节 ...

  3. UVa 1161 Objective: Berlin (最大流)

    题意:给定一些航班,每个航班有人数,和起始终止时间,每次转机要花半小时,问限制时间内最多能有多少人从起始城市到终点城市. 析:差不多是裸板网络流的最大流问题,把每个航班都拆成两个点,这两个点之间连接一 ...

  4. linux下解压tgz文件(转载)

    转自:http://www.blogjava.net/chenlb/archive/2008/09/03/226654.html .tgz 解压:    tar zxvf myfile.tgz

  5. bzoj 3512: DZY Loves Math IV【欧拉函数+莫比乌斯函数+杜教筛】

    参考:http://blog.csdn.net/wzf_2000/article/details/54630931 有这样一个显然的结论:当\( |\mu(n)|==1 \)时,\( \phi(nk) ...

  6. 网站SEO优化如何让百度搜索引擎绝的你的网站更有抓取和收录价值呢？_孙森SEO

    今天孙森SEO为大家唠唠网站到底该如何优化才会让百度搜索引擎绝的你的网站更有抓取和收录价值呢? 第一方面:网站创造高品质的内容,可以为用户提供独特的价值. 1.百度作为搜索引擎,网站内容必须满足 搜索 ...

  7. Spring AOP 面向切面编程入门

    什么是AOP AOP(Aspect Oriented Programming),即面向切面编程.众所周知,OOP(面向对象编程)通过的是继承.封装和多态等概念来建立一种对象层次结构,用于模拟公共行为的 ...

  8. 自己动手利用CentOS6.5 搭建php环境安装discuz论坛

    1.安装搭建论坛必要的软件 apache php mysql CentOS系统我们可以直接使用 yum install 的方式进行软件安装,腾讯云有提供软件安装源,是同步CentOS官方的安装源,包涵 ...

  9. ObjectARX2012错误1 fatal error C1083: 无法打开包括文件:“arxHeaders.h”: No such file or directory； fatal error C1083: 无法打开包括文件:“map”: No such file or directory

    问题1:fatal error C1083: 无法打开包括文件:“arxHeaders.h”: No such file or directory: 解决办法:这个问题很明显,是因为没有在工程属性里包 ...

  10. idea 启动时报 error:java 无效的源发行版11

    编译的版本不符合,需要修改统一