<!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. Linux：Day13(下) GRUB

    GRUB(Boot Loader): grub:GRand Unified Bootloader grub 0.x:grub legacy grub 1.x:grub2 grub legacy: st ...

  2. 《通过C#学Proto.Actor模型》之Persistence

    Actor是有状态的,当每一步执行失败后,返回失败地方继续执行时,希望此时的状态是正确的,为了保证这一点,持久化就成了必要的环节了. Proto.Actor提供了三种方式执久化: Event Sour ...

  3. ZJOI2019做题笔记

    麻将(期望.DP套DP) 先考虑如何计算一个子集是否能胡. 设\(f_{i,0/1,j,k}\)表示考虑了子集中\(1 \sim i\)的牌,是否找到对子,\(i-1,i,i+1\)预计拿\(j\)个 ...

  4. Visual Studio 2017 设置透明背景图

    一.前言 给大家分享一下,如何为VS2017设置透明背景图.下面是一张设置前和设置后的图片. 设置前: 设置后: 二.设置背景图片的扩展程序 我们打开VS的扩展安装界面:[工具]->[扩展和更新 ...

  5. FineUI十周年纪念版即将发布（基于像素的响应式布局，独此一家）！

    [新版预报]FineUI十周年纪念版(v5.0.0)即将于2018-04-23发布! 官网示例已更新:http://pro.fineui.com/ 特别助攻:基于像素的响应式布局,FineUI独家秘笈 ...

  6. 第六章· Redis高可用sentinel

    sentinel介绍 sentinel实战及配置讲解 sentinel介绍 什么是sentinel? Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Mas ...

  7. 4.ansible的delegate_to

    完成发布流程如下 first 修改nginx 配置文件下线 web1-2 使用 delegate_to 将默认hosts指定为 nginx主机 使用remote_user 将用户 锁定为 root s ...

  8. http请求contentype详解

    请求头 在http请求头中有一项重要的参数就是contentype,用来告诉浏览器,我服务器传送过来的数据是什么格式,这样浏览器才知道怎么去解析服务器传过来的数据 urlencoded 通常我们for ...

  9. Linux NTP时间同步服务

    NTP(Network Time Protocol,网络时间协议)是用来使网络中的各个计算机时间同步的一种协议.它的用途是把计算机的时钟同步到世界协调时UTC,其精度在局域网内可达0.1ms,在互联网 ...

  10. [BJOI2019]勘破神机

    [BJOI2019]勘破神机 推式子好题 m=2,斐波那契数列,$f_{n+1}$项 不妨$++l,++r$,直接求$f_n$ 求$\sum C(f_n,k)$,下降幂转化成阶乘幂,这样都是多项式了, ...