<!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. 解决手淘lib-flexible.js在移动端首次加载页面页面先放大后正常问题

    例如这样 然后这样 出现这样的原因一般是   静态的,即html里有一些静态的(即非js动态添加的) 如果在页面加载完成后,页面是用js动态添加的,这个问题就不太明显, doc.addEventLis ...

  2. bacth参数说明 cmd parameter

    http://www.robvanderwoude.com/parameters.php Windows NT 4 introduced a set of new features for comma ...

  3. YTU 2895: H--唱歌的鸟儿

    2895: H--唱歌的鸟儿 时间限制: 1 Sec  内存限制: 128 MB 提交: 26  解决: 10 题目描述 烟大东门有一棵大杨树,树上经常会有很多鸟儿飞来飞去.春天来了,学生物的小姜发现 ...

  4. idea新建springmvc+spring+mybaties项目1

    1,点击file,选择module,新建项目 2,选择maven -- >maven-archetype-webapp 3,输入GroupId,ArtifactId,点击next 4,选择本地m ...

  5. 【Codevs1346】HelloWorld编译器

    http://codevs.cn/problem/1346/ 可怜我战绩 // <1346.cpp> - 10/30/16 17:12:09 // This file is made by ...

  6. 如何正确使用log4j

      如何正确使用log4j? 关键字: 如何正确使用log4j? Java Web开发的过程中,通过会采用输出log的方式来进行调试,产品上线之后,也通常使用log来记录系统的运行状态.最简单的输出l ...

  7. 一条SQL语句是如何执行的？--Mysql45讲笔记记录 打卡day1

    写在前面的话:回想以前上班的时候,空闲时间还是挺多的,但是都荒废了.如今找工作着实费劲了.但是这段时间在极客时间买了mysql45讲,就好像发现了新大陆一样,这是我认真做笔记的第一天,说实话第一讲我已 ...

  8. 在代码里更新autolayout布局

    //遍历view约束(高,宽) NSArray* constrains = self.View.constraints; for (NSLayoutConstraint* constraint in ...

  9. 有了Git这些操作，我再也不怕开发了！

    Git 是什么? Git 是一个分布式的代码管理容器,本地和远端都保有一份相同的代码. Git 仓库主要是由是三部分组成:本地代码,缓存区,提交历史. Git 有哪些常规操作? Git的常规操作你了解 ...

  10. 《windows核心编程系列 》六谈谈线程调度、优先级和关联性

    线程调度.优先级和关联性 每个线程都有一个CONTEXT结构,保存在线程内核对象中.大约每隔20ms windows就会查看所有当前存在的线程内核对象.并在可调度的线程内核对象中选择一个,将其保存在C ...