<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

    #d{

        width:200px;

        height:200px;

        background:blue;

        overflow:hidden;

    }

#dd

{

    width:100px;

    height:100px;

    background:red;

    /*css过渡，给哪个属性加过度*/

    transition:transform 2s;

    margin:50px;

}

#dd:hover

{

    /*css2D转换，让元素放大或减少多少倍，第一个值是宽度，第二个值是高度*/

    transform: scale(3,3);

}

</style>

</head>

<body>

<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div id="d">

    <div id="dd">

    </div>

    </div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>

</body>

</html>

402 CSS菜鸟：transform and transition的更多相关文章

  1. CSS动画transform、transition和animation的区别

    CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...

  2. CSS3-网站导航，transform，transition

    网站导航: 1.a:link    visited    hover   active的顺序是很重要的,如果改变顺序,则hover以及active的状态不起作用 2.<a href=" ...

  3. css3-12 transition+css或transform实现过渡动画

    css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...

  4. css010 css的transform transition和animation

    css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1.         Transform    Transform(变形) r ...

  5. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  6. CSS动画详解及transform、transition、translate的区别

    刚看完一节慕课网的css动画,在此总结下 1. 先说下 transform.transition.translate的区别 transform 和 transition是css的2个属性,transl ...

  7. css中的transform，transition，translate的关系

    transform 旋转(transform是没有动画效果,你改变了它的值,元素的样子就唰的改变了.其中的位移的函数名就叫translate,所以说,translate是transform的一部分.) ...

  8. 深入理解CSS变形transform(2d)

    × 目录 [1]变形原点 [2]变形函数 [3]多值 前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效 ...

  9. css3实践之图片轮播（Transform，Transition和Animation）

    楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...

随机推荐

  1. centos7下kubernetes（18。kubernetes-健康检查）

    自愈能力是容器的重要特性.自愈的默认方式是自动重启发生故障的容器. 用户还可以通过liveness和readiness探测机制设置更精细的健康检查,进而实现: 1.零停机部署 2.避免部署无效的镜像 ...

  2. MySQL数据库引擎类别和更换方式

    MySQL数据库引擎类别 能用的数据库引擎取决于mysql在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三个引擎:ISAM.MYISAM和HEA ...

  3. 20175310 《Java程序设计》第9周学习总结

    20175310 <Java程序设计>第9周学习总结 本周博客:https://www.cnblogs.com/xicyannn/p/10785915.html 教材学习内容总结 这周学习 ...

  4. Java Scanner 类

    下面是创建 Scanner 对象的基本语法: Scanner s = new Scanner(System.in); Scanner -是java类库的一个基础类,一个可以使用正则表达式来解析基本类型 ...

  5. PHP中feof()函数的猜测

    本文环境: OS:Mac OS X 10.8.4 PHP:5.3.15 PHP的官方手册中,函数feof()下面的讨论不少,对此做了一些相关的测试. <?php print <<&l ...

  6. iview 无法缓存的问题

  7. Cnario 3.8支持哪些操作系统？

    Cnario是基于Windows平台开发的软件,包含Server.Messenger和Player三个组件,支持以下Windows 版本系统: Server/Messenger 支持英文版的以下操作系 ...

  8. Jquery2--属性相关的操作

    知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 remo ...

  9. Uint 5.css继承权重,盒模型和border padding

    一 .css的继承性和权重 1.1 继承性:继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. 可以被继承的属性有 ...

  10. centos7之添加开机启动服务/脚本

    一.添加开机启动脚本 #!/bin/bash # THIS FILE IS ADDED FOR COMPATIBILITY PURPOSES # # It is highly advisable to ...