0
点赞
收藏
分享

微信扫一扫

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


阅读目录

  • ​​一 伪类选择器复习​​
  • ​​二 过渡模块的基本使用​​
  • ​​三 控制过渡的速度transition-timing-function​​
  • ​​四 过渡模块连写​​


一 伪类选择器复习

前端学习笔记之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;
}

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


二 过渡模块的基本使用

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

#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;

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

前端学习笔记之CSS过渡模块_前端学习_05前端学习笔记之CSS过渡模块_伪类选择器_06

<!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

前端学习笔记之CSS过渡模块_CSS过渡模块_07

前端学习笔记之CSS过渡模块_前端学习_05前端学习笔记之CSS过渡模块_伪类选择器_06

<!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>

示范 


四 过渡模块连写

前端学习笔记之CSS过渡模块_前端学习_10

#1 过渡属性连写
transition: 过渡属性 过渡时长 运动速度 延迟时间;

#2 过渡连写注意点
2.1 和分开写一样,如果想给多个属性添加过渡效果也是用逗号隔开即可
2.2 连写的时间,可以省略后面的两个参数,因为只要编写了前面两个参数
就满足了过渡的三要素

2.3 如果多个属性运动的速度、延迟时间、持续时间都一样,那么可以简写为
transition: all 5s;

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

前端学习笔记之CSS过渡模块_前端学习_05前端学习笔记之CSS过渡模块_伪类选择器_06

<!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>

示范

五 练习

前端学习笔记之CSS过渡模块_前端学习_05前端学习笔记之CSS过渡模块_伪类选择器_06

<!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>

弹性效果

前端学习笔记之CSS过渡模块_前端学习_05前端学习笔记之CSS过渡模块_伪类选择器_06

<!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://s4.51cto.com/images/blog/202205/24111506_628c4dba8dad099928.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" alt=""></li>
<li><img src="https://s4.51cto.com/images/blog/202205/24111506_628c4dbaac21b94332.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" alt=""></li>
<li><img src="https://s4.51cto.com/images/blog/202205/24111506_628c4dbae01af28811.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" alt=""></li>
<li><img src="https://s4.51cto.com/images/blog/202205/24111507_628c4dbb0a91d11557.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" alt=""></li>
<li><img src="https://s4.51cto.com/images/blog/202205/24111507_628c4dbb2835f8999.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" alt=""></li>
<li><img src="https://s4.51cto.com/images/blog/202205/24111507_628c4dbb4f78846757.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" alt=""></li>
<li><img src="https://s4.51cto.com/images/blog/202205/24111507_628c4dbb6fc9738115.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" alt=""></li>
<li><img src="https://s4.51cto.com/images/blog/202205/24111507_628c4dbbc3b6239103.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" alt=""></li>
<li><img src="https://s4.51cto.com/images/blog/202205/24111508_628c4dbc1e4b678956.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" alt=""></li>
<li><img src="https://s4.51cto.com/images/blog/202205/24111508_628c4dbc3973768162.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" alt=""></li>
</ul>
</div>
</body>
</html>

手风琴效果







举报

相关推荐

0 条评论