一 伪类选择器复习
注意点： #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 { 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 { 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 { 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 { 100px; height: 50px; background-color: red; transition-property: width; transition-duration: 5s; /*告诉系统延迟多少秒开始动画*/ transition-delay: 2s; } div:hover { 300px; } ul { 800px; height: 500px; margin: 0 auto; background-color: pink; border: 1px solid #000; } ul li { list-style: none; 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 { 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 { 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 { 1000px; height: 300px; margin: 0 auto; } img { 200px; height: 300px; } ul { 1000px; height: 300px; background-color: grey; list-style: none; margin: 100px auto; /* 最后一张图片超出了，因为每一张图片很大 但默认情况我们不想看到，所以剪裁掉多余 */ overflow: hidden; } ul li { 100px; height: 300px; float: left; transition: all 0.3s; } ul:hover li { 88px; } /*谁更具体谁的优先级更高，ul 下的li更具体，而ul可能指定有很多li*/ ul li:hover { 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>
