前端学习笔记之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 ...
随机推荐
- cocos2d-x游戏引擎核心之二——内存管理
(一) cocos2d-x 内存管理 cocos2d里面管理内存采用了引用计数的方式,具体来说就是CCObject里面有个成员变量m_uReference(计数); 1, m_uReference的变 ...
- ubuntu 14 root 账户 启用与ssh登录
ubuntu 14.04 root用户登录 开启root帐号的方法: 为了启用root 帐号(也就是设置一个口令)使用: sudo passwd root 当你使用完毕后屏蔽root帐号使用: sud ...
- ajax操作的链式写法
ajax操作的传统写法: $.ajax({ url: url, success: function(){ doWhenSuccess(); }, error: function(){ doWhenEr ...
- python的三个函数（eval、exec、complie）和python版RMI
一.python的三个函数: 1.eval函数: 之前已经讲过了这个函数,该函数也类似于php的eval,例如下边这个例子 eval("os.system('id')") 但是有个 ...
- oracle的connect by level的示例
SELECT regexp_substr('CITY_AA,CITY_BB,CITY_CC,CITY_DD', '[^,]+', 1, LEVEL) t FROM dualCONNECT BY reg ...
- #cat ora11g_ora_.trc
Trace file /u02/app/diag/rdbms/ora11g/ora11g/trace/ora11g_ora_31212.trc Oracle Database 11g Enterpri ...
- Oracle自动备份脚本的实现
问题描述: Oracle自动备份脚本的实现. 错误提示1: Message file RMAN.msb not found Verify that Oracle_HOME is set properl ...
- [Gradle] 获取 gradle 命令行参数
project.gradle.startParameter 参考 StartParameter | Gradle API 4.9
- lunux系统安全
1.清除不必要的系统帐户 [root@deep]# userdel adm [root@deep]# userdel lp [root@deep]# userdel sync [root@deep]# ...
- Oracle下Delete语句
Delete语句 基本语法: delete from 表名 where 条件 注意事项: 1,如果不使用where子句,将表中所有数据全部删除 delete from test; 2,如果要删除某列的 ...