一、过渡模块的基本使用

1.*:hover;这个伪类选择器除了可以用在a标签上,还可以用在其他任何标签上。

2.过渡三要素:

(1)必须要有属性发生变化;(2)必须告诉系统哪个属性需要执行过渡效果;(3)必须告诉系统过渡效果持续的时长。

3.注意点:

当多个属性需要同时执行过渡效果的时候,可以使用英文逗号进行隔开。

例如:

transition-property:width,height,background-color;

transition-duration:0.4s,0.8s,4s;

transition-property:width,height,background-color;
transition-duration:0.4s,0.8s,4s;
<style>
*{
margin:0px;
padding:0px;
}
div{
width:100px;
height:50px;
background:red; }
div:hover{
width:300px;
height:300px;
background-color:blue;
/*告诉系统哪个属性将会使用过渡效果*/
transition-property:width,height,background-color;
/*告诉系统这个过渡效果需要持续多久*/
transition-duration:0.4s,0.8s,4s;
}
........省略代码.......
<div>
</div>

二、其他属性

  <style>
*{
margin:0px;
padding:0px;
}
div{
width:100px;
height:50px;
background:red; }
div:hover{
width:300px;
height:300px;
background-color:blue;
transition-property:width,height,background-color;
transition-duration:0.4s,0.8s,4s;
transition-delay:2s;
}
ul{
width:800px;
height:500px;
margin:0 auto;
background-color:pink;
}
ul li {
list-style:none;
width:100px;
height:50px;
margin-top:50px;
background-color:green;
transition-property:margin-left;
transition-duration:2s; }
ul:hover li{
margin-left:700px;
}
ul li:nth-child(1){
/*该属性用于控制动画运动速度的*/
transition-timing-function:linear;

}
ul li:nth-child(2){
transition-timing-function:ease;
}
ul li:nth-child(3){
transition-timing-function:ease-in;
}
ul li:nth-child(4){
transition-timing-function:ease-out;
}
ul li:nth-child(5){
transition-timing-function:ease-in-out;
}
......省略代码......
<div>
</div>
<ul>
<li>linear</li>
<li>ease</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li>
</ul>

三、源码:

D163_ExcessiveModule.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/ D163_ExcessiveModule.html

2.CSDN:https://blog.csdn.net/weixin_44630050

3.博客园:https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包

HTML连载65-过渡模块的基本使用的更多相关文章

  1. CSS动画之过渡模块

    :hover伪类选择器可以用于所有的选择器(只有在悬停时,执行选择器的属性)CSS3中新增过渡模块:transition property(属性)duration(过渡效果花费的时间)timing-f ...

  2. css过渡模块和2d转换模块

    今天,我们一起来研究一下css3中的过渡模块.2d转换模块和3d转换模块 一.过渡模块transition (一)过度模块的三要素: 1.必须要有属性发生变化 2.必须告诉系统哪个属性需要执行过渡效果 ...

  3. CSS学习笔记-05 过渡模块的基本用法

    话说 1对情侣两情相悦,你情我愿.时机成熟,夜深人静...咳 ,如果就这么直奔主题,是不是有点猴急,所以,还是要来点前戏@. 铛 铛, 这个时候 过渡模块出现了. 划重点: 上代码: <!DOC ...

  4. 前端学习笔记之CSS过渡模块

    阅读目录 一 伪类选择器复习 二 过渡模块的基本使用 三 控制过渡的速度transition-timing-function 四 过渡模块连写 一 伪类选择器复习 注意点: #1 a标签的伪类选择器可 ...

  5. CSS学习笔记-过渡模块

    过渡模块:    1.过渡三要素        1.1必须要有属性发生变化        1.2必须告诉系统哪个属性需要执行过渡效果        1.3必须告诉系统过渡效果持续时长    2.格式: ...

  6. HTML连载66-过度模块的连写、弹性效果

    一.过渡模块的连写 1.过渡连写格式: 过渡属性  过渡时长  运动速度  延迟时间: 2.过渡连写注意点: (1)和分开写一样,如果想要多个属性添加过渡效果,也是使用逗号来隔开即可. (2)连写的时 ...

  7. 2D过渡模块的其他属性

    官网上关于过渡属性的值: 属性 描述 CSS transition 简写属性,用于在一个属性中设置四个过渡属性. 3 transition-property 规定应用过渡的 CSS 属性的名称. 3 ...

  8. UWA 技术分享连载 转载

    技术分享连载1 Q1:Texture占用内存总是双倍,这个是我们自己的问题,还是Unity引擎的机制? Q2:我现在发现两个因素直接影响Overhead,一个是Shader的复杂度,一个是空Updat ...

  9. python 各模块

    01 关于本书 02 代码约定 03 关于例子 04 如何联系我们 1 核心模块 11 介绍 111 内建函数和异常 112 操作系统接口模块 113 类型支持模块 114 正则表达式 115 语言支 ...

随机推荐

  1. 2018icpc徐州网络赛-H Ryuji doesn't want to study(线段树)

    题意: 有n个数的一个数组a,有两个操作: 1 l r:查询区间[l,r]内$a[l]*(r-l+1)+a[l+1]*(r-l)+a[l+2]*(r-l-1)+\cdots+a[r-1]*2+a[r] ...

  2. Go语言实现:【剑指offer】对称的二叉树

    该题目来源于牛客网<剑指offer>专题. 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. Go语言实现: 方法一:递归 / ...

  3. python学习(7)关于列表操作相关命令以及浅复制深复制

    在python中,[]表示的是列表.列表有各种操作命令. 1.append()方法,添加一个元素到列表尾部. 注意append()方法与extend()方法有区别:list.append(object ...

  4. [源码分析] 从源码入手看 Flink Watermark 之传播过程

    [源码分析] 从源码入手看 Flink Watermark 之传播过程 0x00 摘要 本文将通过源码分析,带领大家熟悉Flink Watermark 之传播过程,顺便也可以对Flink整体逻辑有一个 ...

  5. Time-Frequency Networks For Audio Super-Resolution

    论文题目:2018_用于音频超分辨率的时频网络 博客作者:凌逆战 博客地址:https://www.cnblogs.com/LXP-Never/p/12345950.html 摘要 音频超分辨率(即带 ...

  6. 集智学院 “Deep X:Deep Learning with Deep Knowledge”的公开讲座---总结

    人工智能旨在了解人类智能的本质,并创造出能模仿人类智能做出反应的智能机器,目前在一些领域已经取得显著的成功,如AI玩游戏.问答系统.自动驾驶.无人机.机器人.翻译.人脸识别.语音识别等领域.深度学习的 ...

  7. 数据算法 --hadoop/spark数据处理技巧 --(5.移动平均 6. 数据挖掘之购物篮分析MBA)

    五.移动平均 多个连续周期的时间序列数据平均值(按相同时间间隔得到的观察值,如每小时一次或每天一次)称为移动平均.之所以称之为移动,是因为随着新的时间序列数据的到来,要不断重新计算这个平均值,由于会删 ...

  8. Leetcode面试题17.20_连续中值

    题目地址 实现一个数列的动态添加和查询中位数. 复杂点的话应该可以写个平衡树什么的,然后查询第k大,还可以删除数字. 简单点的话显然可以维护两个堆,一个大顶堆一个小顶堆,而且大顶堆最多比小顶堆多一个, ...

  9. GNU make doc - 3.8

    Note that the directory prefix (D), as described in Implicit Rule Search Algorithm, is appended (aft ...

  10. JS高阶编程技巧--compose函数

    先看代码: let fn1 = function (x) { return x + 10; }; let fn2 = function (x) { return x * 10; }; let fn3 ...