前端学习笔记之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 ...
随机推荐
- PHP 允许Ajax跨域访问 (Access-Control-Allow-Origin)
Ajax访问php,报错 php顶部加上即可: header("Access-Control-Allow-Origin: *");
- 【Android】Android Theme的设置
在AndroidManifest.xml文件中,可以对每一个Activity设置android:theme theme的设置 可以设置为系统自带的格式,也可以自定义格式. A: 系统自带格式 @and ...
- tortoiseSVN如何发现和解决冲突？
版本冲突原因: 假设A.B两个用户都在版本号为100的时候,更新了kingtuns.txt这个文件,A用户在修改完成之后提交kingtuns.txt到服务器,这个时候提交成功,这个时候kingtuns ...
- numeric_limits 模板的相关知识点
说白了,它是一个模板类,它主要是把C++当中的一些内建型别进行了封装,比如说numeric_limits<int>是一个特化后的类,从这个类的成员变量与成员函数中,我们可以了解到int的很 ...
- 【转】SQL Server编程游标
在关系数据库中,我们对于查询的思考是面向集合的.而游标打破了这一规则,游标使得我们思考方式变为逐行进行.对于类C的开发人员来着,这样的思考方式会更加舒服. 正常面向集合的思维方式是: 而对于游标来说: ...
- MVC之LayOut布局页
LayOut布局页,就是相当于WebForm中母版页,实现了一个代码的共用和公共布局的作用. 布局页的使用 (1)添加新项,选择MVC布局页 <!DOCTYPE html> <htm ...
- SaltStack实现Haproxy Nginx+php MySQL主从
构建图如下 参考文档:https://github.com/unixhot/saltbook-code/tree/master
- Java编程思想第四版勘误
坊间传说这本书翻译得很烂,我倒觉得还好.虽然看原文更准确,但是如果在具备一定编程思维和基础.能够看出来疑问的情况下,还是看中文更快一些,而且这本书本身也不适合初学者看.当然,错误和不通顺还是有的,而且 ...
- Pandas使用to_csv保存中文数据用Excel打开是乱码
关于这个问题还是困扰了很久,我生成了一些样本数据,打算保存到csv文件,之后用pandas的命令: # data是DataFrame的格式 data.to_csv('./data/myfile.csv ...
- python及numpy，pandas易混淆的点
https://blog.csdn.net/happyhorizion/article/details/77894035 初接触python觉得及其友好(类似matlab),尤其是一些令人拍案叫绝不可 ...