<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         div{

             width: 200px;

             height: 200px;

             background-color: red;

             position: absolute;

             left: 50px;

             top: 50px;

             /*过渡：过渡有延迟，有值的变化才能有过渡*/

            /*

             transition-property: 需要添加过渡效果的样式属性名称;  --必需

             transition-duration: 过渡效果完成所需要的时长，以s为单位;  -- 必需

             transition-delay: 延迟多少s后开始过渡 ;  -- 0

             transition-timing-function:  过渡效果的时间函数--速度曲线;  --ease-in-out

             */

             /*transition-property: left;

             transition-duration: 1s;

             transition-delay: 1s;

             transition-timing-function: linear;*/

             /*transition-property: left,background-color;*/

             /*transition-duration:  1s,10s;*/

             /*简写方式*/

             /*transition: property duration delay timing-function;*/

             /*transition: left 1s 1s linear , background-color 1s;*/

             /*all 对所有属性都会运用过渡效果

             1.遍历当前元素的所有可能的样式属性

             2.降低效率

             */

             transition: all 1s 1s linear;

         }

         div:active{

             left: 500px;

             width: 400px;

             background-color: #ceffbb;

         }

     </style>

 </head>

 <body>

      <div></div>

 </body>

 </html>

H5C3--过渡transition的更多相关文章

  1. 深入理解CSS过渡transition

    × 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...

  2. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  3. CSS3之过渡Transition

    CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...

  4. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  5. css过渡transition

    定义 过渡transition是一个复合属性,包括transition-property.transition-duration.transition-timing-function.transiti ...

  6. 过渡 - transition

    过渡 - transition 是变形transfrom其中一种效果,定义为一种状态过渡到另一种状态的过程,今天学习到css3动画,特此记录下过渡的使用和一些效果. 实例1: <div clas ...

  7. css过渡transition属性

    一.CSS3 过渡 (一).CSS3过渡简介 CSS3过渡是元素从一种样式逐渐改变为另一种的效果. 实现过渡效果的两个要件: 规定把效果添加到哪个 CSS 属性上 规定效果的时长 定义动画的规则 过渡 ...

  8. CSS3(2)--- 过渡(transition)

    CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...

  9. 深入css过渡transition

    通过过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果.过渡属性看似简单,但实际上它有很多需要注意的细节和容易混淆的地方. 过渡transitio ...

  10. css3过渡transition

    过渡:transition transition:transition-property/duration/timing-function/delay的缩写. transition : <'tr ...

随机推荐

  1. Node中的模块系统

    加载require var 自定义变量名称 = require('模块') 两个作用: 执行被加载模块的代码 得到被加载模块中的exports导出接口对象 导出exports node中是模块作用域, ...

  2. Jsp Layout 布局页

    本文章仅用于知识记录 /WEB-INF/tags/layout.tag <%@ tag language="java" pageEncoding="UTF-8&qu ...

  3. fiddler抓包工具遇到的问题-------502报错

    遇到的问题: 打开浏览器,输入本机的虚拟机地址的bugfree,出现无法连接的提示,具体是: [Fiddler] The connection to '192.168.211.128' failed. ...

  4. 洛谷P5104 红包发红包

    题目链接: P5104 题目分析: 题目和\(n\)是没什么关系的,因为是\(n\)个人抢,其实不一定抢完 其实很显然--就是求一个连续型随机变量的期望 首先设一个随机变量\(X\),表示第一个人拿到 ...

  5. Linux 的文件和目录管理类命令

    文件和目录管理类的命令 目录: cd ~[username] ~:指定用户的家目录 cd -:回到上一次所在的目录 路径: 相对路径中: .:当前目录 ..:父目录 pwd: print workin ...

  6. eval(str)函数

    转载:地址于http://blog.csdn.net/SeeTheWorld518/article/details/47983511 eval(str)函数很强大,官方解释为:将字符串str当成有效的 ...

  7. JavaScript数据可视化编程书籍上面的例子(flotr2)

    先看demo再看例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  8. 【核心核心】5.Spring【DI】注解方式

    使用注解的方式依赖注入不用提供set方法 1.普通类型的注解 @Value @Value(value="春天") private String name; 2.对象类型的注解 @A ...

  9. [Swoole系列入门教程 6] TCP协议和粘包

  10. HZOI20190803 B题

    题目:https://www.cnblogs.com/Juve/articles/11295333.html 话说这题方法挺多 40分:暴力 65:莫队,你会T得飞起 我考场上没打出带修莫队,没有修改 ...