HTML连载65-过渡模块的基本使用
一、过渡模块的基本使用
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-过渡模块的基本使用的更多相关文章
- CSS动画之过渡模块
:hover伪类选择器可以用于所有的选择器(只有在悬停时,执行选择器的属性)CSS3中新增过渡模块:transition property(属性)duration(过渡效果花费的时间)timing-f ...
- css过渡模块和2d转换模块
今天,我们一起来研究一下css3中的过渡模块.2d转换模块和3d转换模块 一.过渡模块transition (一)过度模块的三要素: 1.必须要有属性发生变化 2.必须告诉系统哪个属性需要执行过渡效果 ...
- CSS学习笔记-05 过渡模块的基本用法
话说 1对情侣两情相悦,你情我愿.时机成熟,夜深人静...咳 ,如果就这么直奔主题,是不是有点猴急,所以,还是要来点前戏@. 铛 铛, 这个时候 过渡模块出现了. 划重点: 上代码: <!DOC ...
- 前端学习笔记之CSS过渡模块
阅读目录 一 伪类选择器复习 二 过渡模块的基本使用 三 控制过渡的速度transition-timing-function 四 过渡模块连写 一 伪类选择器复习 注意点: #1 a标签的伪类选择器可 ...
- CSS学习笔记-过渡模块
过渡模块: 1.过渡三要素 1.1必须要有属性发生变化 1.2必须告诉系统哪个属性需要执行过渡效果 1.3必须告诉系统过渡效果持续时长 2.格式: ...
- HTML连载66-过度模块的连写、弹性效果
一.过渡模块的连写 1.过渡连写格式: 过渡属性 过渡时长 运动速度 延迟时间: 2.过渡连写注意点: (1)和分开写一样,如果想要多个属性添加过渡效果,也是使用逗号来隔开即可. (2)连写的时 ...
- 2D过渡模块的其他属性
官网上关于过渡属性的值: 属性 描述 CSS transition 简写属性,用于在一个属性中设置四个过渡属性. 3 transition-property 规定应用过渡的 CSS 属性的名称. 3 ...
- UWA 技术分享连载 转载
技术分享连载1 Q1:Texture占用内存总是双倍,这个是我们自己的问题,还是Unity引擎的机制? Q2:我现在发现两个因素直接影响Overhead,一个是Shader的复杂度,一个是空Updat ...
- python 各模块
01 关于本书 02 代码约定 03 关于例子 04 如何联系我们 1 核心模块 11 介绍 111 内建函数和异常 112 操作系统接口模块 113 类型支持模块 114 正则表达式 115 语言支 ...
随机推荐
- POJ_3450_KMP
http://poj.org/problem?id=3450 直接暴力枚举第一行的每一个字串,在下面的字符串中查找就行了,注意不符合就及时break. 然后试了一下strstr,发现效率是KMP的3- ...
- CCF_201512-1_数位之和
水. #include<iostream> #include<cstdio> using namespace std; int main() { ; cin >> ...
- Codeforces 1304E 1-Trees and Queries (树上距离+思维)(翻译向)
题意 给你一棵树,q个询问(x,y,a,b,k),每次问你如果在(x,y)加一条边,那么a到b能不能走k步,同一个点可以走多次 思路(翻译题解) 对于一条a到b的最短路径x,可以通过左右横跳的方法把他 ...
- 1276:【例9.20】P2758 编辑距离
题目传送门[(https://www.luogu.com.cn/problem/P2758)] 题目描述 设A和B是两个字符串.我们要用最少的字符操作次数,将字符串A转换为字符串B.这里所说的字符操作 ...
- BurpSuite--代理和浏览器设置
上一篇文章我们完成了JAVA环境的搭建和burpsuite的安装,接下来请大家和我一起一步一步的完成burpsuite的代理和浏览器的相关设置. 关注“白帽技术与网络安全”获取安装包 1.设置浏览器代 ...
- PyTorch可视化——tensorboard、visdom
一.pytorch与tensorboard结合使用 Tensorboard Tensorboard一般都是作为tf的可视化工具,与tf深度集成,它能够展现tf的网络计算图,绘制图像生成的定量指标图以及 ...
- python 中列表 元组 字典 集合的区别
先看图片解释 (1)列表 什么是列表呢?我觉得列表就是我们日常生活中经常见到的清单.比如,统计过去一周我们买过的东西,把这些东西列出来,就是清单.由于我们买一种东西可能不止一次,所以清单中是允许有重复 ...
- 详解CopyOnWrite容器及其源码
详解CopyOnWrite容器及其源码 在jave.util.concurrent包下有这样两个类:CopyOnWriteArrayList和CopyOnWriteArraySet.其中利用到了Cop ...
- python 分析慢查询日志生成报告
python分析Mysql慢查询.通过Python调用开源分析工具pt-query-digest生成json结果,Python脚本解析json生成html报告. #!/usr/bin/env pyth ...
- 兄弟连 企业shell笔试题 1-15
这些题目收集自网络,对比原来的答案,又根据实际情况重新编写了自己的答案 企业实践题1: (生产实战案例):监控MySQL主从同步是否异常,如果异常,则发送短信或者邮件给管理员.提示:如果没主从同步环境 ...