前端学习笔记之CSS过渡模块
一 伪类选择器复习

注意点:
#1 a标签的伪类选择器可以单独出现,也可以一起出现
#2 a标签的伪类选择器如果一起出现,有严格的顺序要求,否则失效
编写的顺序必须要严格遵循: l v h a
a:link{
color: skyblue;
}
a:visited {
color: green;
} a:hover {
color: #e9289c;
} a:active {
color: pink;
}

二 过渡模块的基本使用

#1、过渡三要素
1.1 必须要有属性发生变量,如
div:hover {
width: 300px;
}
1.2 必须告诉系统哪个属性需要执行过渡效果
transition-property: width;
1.3 必须告诉系统过渡效果持续时长
transition-duration: 5s; #2、注意:
当多个属性需要同时执行过渡效果时,用逗号分隔即可
transition-property:width,background-color;
transition-duration: 5s,5s;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 50px;
background-color: red; /*
告诉系统哪个系统需要执行过渡效果
transition-property: width;
/*告诉系统过渡效果持续的时长
transition-duration: 5s; css是层叠样式表,这么写会跟上面的冲突,所以我们需要修改
transition-property: background-color;
transition-duration: 5s;
*/ transition-property:width,background-color;
transition-duration: 5s,5s;
} /*
hover这个伪类选择器除了可以用在a标签上,还可以用在任何其他的标签上
*/
div:hover {
width: 300px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
示范
三 控制过渡的速度transition-timing-function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 50px;
background-color: red; transition-property: width;
transition-duration: 5s; /*告诉系统延迟多少秒开始动画*/
transition-delay: 2s;
} div:hover {
width: 300px;
} ul {
width: 800px;
height: 500px;
margin: 0 auto;
background-color: pink;
border: 1px solid #000;
} ul li {
list-style: none;
width: 100px;
height: 50px;
margin-top: 50px;
background-color: blue; transition-property: margin-left;
transition-duration: 10s; } ul:hover li {
margin-left: 700px;
} ul li:nth-child(1) {
transition-timing-function: ease; } ul li:nth-child(2) {
transition-timing-function: linear; } ul li:nth-child(3) {
transition-timing-function: ease-in; } ul li:nth-child(4) {
transition-timing-function: ease-in-out; }
ul li:nth-child(5) {
transition-timing-function: ease-in-out; }
</style>
</head>
<body> <div></div> <ul>
<li>ease</li>
<li>linear</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li>
</ul> </body>
</html>
示范
四 过渡模块连写

#1 过渡属性连写
transition: 过渡属性 过渡时长 运动速度 延迟时间; #2 过渡连写注意点
2.1 和分开写一样,如果想给多个属性添加过渡效果也是用逗号隔开即可
2.2 连写的时间,可以省略后面的两个参数,因为只要编写了前面两个参数
就满足了过渡的三要素 2.3 如果多个属性运动的速度、延迟时间、持续时间都一样,那么可以简写为
transition: all 5s;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 50px;
background-color: red; /*transition: width 5s linear 0s;*/
/*transition: width 5s linear 0s,background-color*/
/*5s linear 0s;*/ /*transition: width 5s,background-color 5s;*/
/*transition: width 5s,background-color,height 5s;*/ transition: all 5s; } div:hover {
width: 500px;
background-color: blue; height: 500px;
} </style>
</head>
<body>
<div></div>
</body>
</html>
示范
五 练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
* {
margin: 0;
padding: 0;
} div {
height: 100px;
background-color: grey;
margin-top: 100px;
text-align: center; } span {
font-size: 50px;
line-height: 100px; transition: all 5s; } div:hover span {
margin-left: 50px;
} </style>
</head>
<body>
<div>
<span>EGON</span>
<span>是</span>
<span>讲</span>
<span>师</span>
<span>界</span>
<span>的</span>
<span>恐</span>
<span>怖</span>
<span>分</span>
<span>子</span>
</div>
</body>
</html>
弹性效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
* {
margin: 0;
padding: 0;
} div {
width: 1000px;
height: 300px;
margin: 0 auto;
} img {
width: 200px;
height: 300px;
} ul {
width: 1000px;
height: 300px;
background-color: grey;
list-style: none;
margin: 100px auto; /*
最后一张图片超出了,因为每一张图片很大
但默认情况我们不想看到,所以剪裁掉多余
*/
overflow: hidden;
} ul li {
width: 100px;
height: 300px;
float: left; transition: all 0.3s;
} ul:hover li {
width: 88px;
} /*谁更具体谁的优先级更高,ul 下的li更具体,而ul可能指定有很多li*/
ul li:hover {
width: 200px;
} </style>
</head>
<body>
<div>
<ul>
<li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225724530-539090864.jpg" alt=""></li>
<li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225751362-1832630751.jpg" alt=""></li>
<li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225809591-1990809146.jpg" alt=""></li>
<li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225816920-580320384.jpg" alt=""></li>
<li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225828392-1011509025.jpg" alt=""></li>
<li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225836490-1526815653.jpg" alt=""></li>
<li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225847998-887601490.jpg" alt=""></li>
<li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225853390-460353134.jpg" alt=""></li>
<li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225859796-1981914722.jpg" alt=""></li>
<li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225906468-571800433.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
手风琴效果
前端学习笔记之CSS过渡模块的更多相关文章
- 前端学习笔记之CSS选择器
阅读目录 一 基本选择器 二 后代选择器.子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器 ...
- 前端学习笔记之CSS网页布局
CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...
- 2、前端学习笔记之——css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端学习笔记之CSS属性设置
CSS属性设置 阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...
- 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理
在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...
- 前端学习笔记之CSS浮动浅析
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 前端学习笔记之CSS介绍
阅读目录 一 什么是CSS 二 为何要用CSS 三 如何使用CSS 一 什么是CSS CSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的. 样式指的是H ...
- 前端学习笔记之CSS文档流
先引用一段W3C的文档: 9.3 Positioning schemes In CSS 2.1, a box may be laid out according to three positionin ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
随机推荐
- Effective C++ —— 实现(五)
条款26 : 尽可能延后变量定义式的出现时间 1. 你不只应该延后变量的定义,直到非得使用该变量的前一刻为止,甚至应该尝试延后这份定义直到能够给它初值实参为止.这样,不仅能够避免构造(和析构)非必要对 ...
- Jquery跨域Ajax取值
HTML: $.ajax({ type: "get", async: false, url: "http://www.xxxxxx.com/otherLogin/chec ...
- FileInputStream与FileOutputStream类 Reader类和Writer类 解析
FileInputStream和FileOutputStream类分别用来创建磁盘文件的输入流和输出流对象,通过它们的构造函数来指定文件路径和文件名. 创建FileInputStream实例对象时,指 ...
- C++ XML 序列化器
http://www.cppblog.com/xlshcn/archive/2007/11/21/cppxmlserializer.html
- linux :故障提示:Error:No suitable device found: no device found for connection "System eth0"
解决:1./etc/udev/rules.d/70-persistent-net.rules 中的mac地址2.网卡配置文件ifcfg-eth0中的mac地址3.ifconfig中的mac地址以上三个 ...
- (转)梯度下降法及其Python实现
梯度下降法(gradient descent),又名最速下降法(steepest descent)是求解无约束最优化问题最常用的方法,它是一种迭代方法,每一步主要的操作是求解目标函数的梯度向量,将当前 ...
- Oracle AWR 之 通过dbms_workload_repository.awr_report_text(html)函数在客户端生成AWR报告
1.概述 一般情况下,awr报告都是通过在oracle服务器的sqlplus窗口调用$ORACLE_HOME/rdbms/admin/awrrpt.sql脚本生成报告.方法如下: [oracle@lo ...
- ArrayList遍历的三种方式 array arrayList转换
ArrayList遍历的三种方式 - 呵呵静 - 博客园 https://www.cnblogs.com/mjyung/p/6725182.html
- TA-Lib中文文档(二):talib安装
安装 使用pip安装 PyPI: $ pip install TA-Lib Or checkout the sources and run setup.py yourself: $ python se ...
- Intellij idea的Dependencies波浪线
昨天在家做项目不知道搞了什么出现了大量波浪线.搞了大半天解决了下面的问题. 1.pom.xml出现波浪线.看右边 maven project-->Profiles 勾选dev 2.上面已勾选还有 ...