<!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. sqlite获取表字段

    sqlite下能通过sqlite_master获取指定数据库的表信息和表结构 但是通过sqlite_master不能获取表字段的信息 如果需要获取指定表字段的所有信息 可以使用如下语法: PRAGMA ...

  2. Ignite-Spark

    2017.12.02 Ignite-Spark 讲ppt的时候还是很紧张 PPT地址 https://files.cnblogs.com/files/swobble/Spark.pptx

  3. 软件-版本控制器-VisualSVN：VisualSVN

    ylbtech-软件-版本控制器-VisualSVN:VisualSVN VisualSVN 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. https:/ ...

  4. java当拿到一个项目后该怎么看的一些个人见解(附带快捷键)

    刚出来实习,BOSS让我用maven下载架包后进行修改. 刚开始拿到项目两眼一黑,完全不知道该怎么下手.想找server层,完全不知道在那么多架包那里开始弄. 这个时候首先要明确你要修改的位置,找到这 ...

  5. 转：Linux 文件IO理解

    源地址http://blog.csdn.net/lonelyrains/article/details/6604851 linux文件IO操作有两套大类的操作方式:不带缓存的文件IO操作,带缓存的文件 ...

  6. 立体声耳机接口3F07

    仅探讨三段式 剩余的两根,则是开关,插入耳机后,会断开,可以用于耳机和扬声器的切换.老式收音机大多采用这个结构

  7. python3-常用模块之openpyxl(1)

    1.创建工作簿 from openpyxl import Workbook # 创建excel对象 wb = Workbook() # 获取第一个sheet = wb.active # 单元格写入内容 ...

  8. leetcode 996. Number of Squareful Arrays

    给定一个长度小于 12 的数组 要求排列方式的种数 使得相邻和为完全平方 不考虑数学结构 将问题转化为 一笔画问题 和为完全平方代表 之间存在通路 回溯法 N^N 记忆化搜索 NN 2^N 判断是否是 ...

  9. Java基础（spring事物和锁）

    使用步骤: 步骤一.在spring配置文件中引入<tx:>命名空间<beans xmlns="http://www.springframework.org/schema/b ...

  10. 构建HBase二级索引