<!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. java定时器2-spring实现

    spring定时器(基于xml) spring定时器(基于注解) quartz定时器 1.使用基于xml配置的spring定时器 首先编写定时任务类Mytask public class Mytask ...

  2. wpa_supplicant drivers 查看跟踪

    /**************************************************************************** * wpa_supplicant drive ...

  3. Burnside&Polya

    以前只是直接用了这两个式子..今天才仔细看了证明..[网上的真是难懂啊 我看的几个博客地址(各有优缺): 其实如果能懂的话 只看博客B就可以了 首先是一些置换群方面的定义和性质  博客A:http:/ ...

  4. bzoj3626 [LNOI2014]LCA——树链剖分

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3626 思路很巧妙,把区间换成前缀和相减: 把 l ~ r 到根路径上的点的点权都+1,然后 ...

  5. vim带你装逼带你飞（二）

    上篇我贴上了我使用的vim配置及插件配置,有这些东西只能是一个脚本堆积,无从谈高效的代码阅读开发. 下面我们就来写经常使用的命令,就从配置F系列快捷键开始吧. F+ n 快捷键配置 F1基本上时帮助, ...

  6. 使用VirtualBox虚拟机搭建局域网

    参考资料: http://www.awaimai.com/995.html https://my.oschina.net/cofecafe1/blog/206535 最近公司局域网网络改造,在改造前已 ...

  7. hdu4975 A simple Gaussian elimination problem.（最大流+判环）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4975 题意:和hdu4888基本一样( http://www.cnblogs.com/a-clown/ ...

  8. tar 报错gzip: stdin: not in gzip format（转载）

    转自:http://blog.sina.com.cn/s/blog_6f2274fb0100z026.html 今天在linux下 用tar -zxf xxx.tar.bz2 然后就报这个错. gzi ...

  9. bzoj 2438: [中山市选2011]杀人游戏【tarjan】

    没看太懂题意orz 最优的是tarjan缩点之后问入度为0的点,因为问这个点可以知道整个块的情况 答案是这ans个入度为0的点都不是杀手的概率\( \frac{n-ans}{n} \) 但是有特殊情况 ...

  10. .Net Core之Configuration

    ASP.NET CORE 中自动集成了应用配置,支持从以下 源 处获取配置键值对 命令行 环境变量 内存 文件配置 其中文件配置是我们最常用的方式,默认文件是.json的json格式文件,摒弃了以往. ...