- 1ChatGPT 究竟在做什么？它为何能做到这些？（2）
- 2python暂停和恢复游戏_pygame游戏之旅 添加游戏暂停功能
- 339.利用matlab寻找素数（matlab程序）_if(~mod(i,j))
- 4华为手机如何升级鸿蒙系统_华为手机如何开启鸿蒙系统？
- 5字节跳动2022校招研发提前批宣讲会，同学们最关心的10个问题
- 6java调用oracle删除,使用IDEA对Oracle数据库进行简单增删改查操作
- 7C语言-啤酒饮料问题_c语言的啤酒饮料问题。
- 8pytorch实现 CNN_LSTM_Attention_DNN网络模型_cnn_lstm_attention python代码
- 9Linux 之 用户、用户组以及权限_添加名为helloworld一般用户
- 10使用树梅派将设备通过Link SDK接入阿阿里云IoT物联网平台_怎么使用sdk将树莓派和云平台连接
CSS初入门：过渡-Transitions_css transition
赞
踩
过渡
介绍
CSS transittions是一种更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效。而要实现这一点，就必须满足如下两项内容：
（1）指定要添加效果的CSS属性
（2）指定效果的持续时间
过渡的三要素：
（1）必须要有属性发生变化
（2）必须告诉系统那个属性需要执行过渡效果
（3）必须告诉系统过渡的持续时长
触发过渡的方式：
1、:hover鼠标悬停触发
2、:active用户单击元素并按住鼠标时触发
3、:focus获得焦点时触发
4、@media触发，符合媒体查询条件时触发
5、点击事件，用户点击元素时触发
常用属性
transition-property
作用：规定应用过渡的CSS属性的名称（哪个属性发生变化）
取值：
（1）none 没有属性会获得过渡效果
（2）all，所有属性豆浆获得过渡效果
（3）property，定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
transition-duration
作用：定义过渡效果花费的时间。默认是 0。
取值：time，规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果
transition-timing-function
作用：规定过渡效果的时间曲线。默认是 “ease”。
取值：
（1）linear，对顶以相同速度开始至结束的过渡效果（匀速变）。【匀速】
（2）ease，规定慢速开始，然后变快，然后慢速结束的过渡效果。【慢-快-慢】
（3）ease-in，规定慢速开始的过渡效果【慢-匀】
（4）ease-out，规定以慢速结束的过渡效果。【匀-慢】
（5）ease-in-out，规定以慢速开始和结束的过渡效果。【慢-匀-慢】
（6）cubic-bezier（n,n,n,n）,在cubic-bezier 函数中定义自己的值。可取的值是 0 至 1 之间的数值。
transition-delay
作用：规定过渡效果何时开始。默认是 0
取值：time 指定秒或毫秒数之前要等待切换效果开始
注意点：
当多个属性需要同时执行过渡效果时用逗号隔开即可，例如：
transition-property: width, background-color;
transition-duration: 5s, 5s;
transition 是 transition-property， transition-duration，transition-timing-function的速写形式
连写格式
transition: 过渡属性 过渡时长 运动速度 延迟时间;
例如：transition: width 5s linear 0s,background-color 5s linear 0s;
- 1
注意点：
（1）如果想给多个属性添加过渡效果也是用逗号隔开即可
（2）如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为
transition:all 0s;
实例练习1：
实现如下的动画：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>transition测试</title> <style> div{ width: 100px; height: 100px; background-color: #ff0000; transition-property: width, background-color; transition-duration: 5s,5s; transition-timing-function: linear; } img{ width: 300px; transition: width 5s linear; } div:hover{ width:400px; background-color: #00ff00; } img:hover{ width:500px; } </style> </head> <body> <!-- 需求：鼠标移入时 1、div变宽，颜色由红色变蓝色 2、图片放大 --> <div></div> <img src="../images/ad8.jpg" alt=""> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
实例练习2：
实现如下的动画：时间曲线动画
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>时间曲线动画</title> <style> *{ margin: 0; padding: 0; list-style: none; } ul{ width: 600px; height: 600px; border: 1px solid red; margin:50px auto; } li{ width: 100px; height: 50px; background-color: aqua; margin:50px 0; } /* 匀速 */ ul li:first-child{ transition: margin-left 5s linear; } /* 慢快慢 */ ul li:nth-child(2){ transition:margin-left 5s ease; } /* 开始慢逐渐快 */ ul li:nth-child(3){ transition: margin-left 5s ease-in; } /* 结束慢 */ ul li:nth-child(4){ transition: margin-left 5s ease-out; } /* 开始慢，结束慢 */ ul li:last-child{ transition:margin-left 5s ease-in-out; } ul:hover li{ margin-left:600px } </style> </head> <body> <ul> <li>linear</li> <li>ease</li> <li>ease-in</li> <li>ease-out</li> <li>ease-in-out</li> </ul> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
实例练习3：
实现如下的动画：文字放大
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字放大</title> <style> div{ height:200px; background-color: rgb(97, 9, 155); margin-top: 100px; text-align: center; } div span{ line-height: 200px; font-size: 30px; transition:font-size 5s linear; } div:hover span{ font-size: 150px; } /*第二种方式*/ /* div span:hover{ font-size:150px; } */ </style> </head> <body> <div> <span>清</span> <span>华</span> <span>大</span> <span>学</span> </div> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
实例练习4：
实现如下的动画：手风琴相册
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手风琴相册</title> <style> *{ margin:0; padding:0; list-style:none; } ul{ width: 900px; height: 300px; border: 1px solid; background-color: black; margin: 50px auto; } ul li{ width: 150px; height: 300px; float: left; overflow: hidden; transition: width 1s ease; } ul:hover li{ width:100px; } ul li:hover{ width: 400px; } </style> </head> <body> <ul> <li><img src="../images/ad7.jpeg" alt=""></li> <li><img src="../images/ad8.jpg" alt=""></li> <li><img src="../images/ad9.jpeg" alt=""></li> <li><img src="../images/ad10.jpg" alt=""></li> <li><img src="../images/ad11.jpg" alt=""></li> <li><img src="../images/ad12.jpg" alt=""></li> </ul> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
