在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
transition过渡:四个小属性
<!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> .box { width: 200px; height: 200px; background-color: black; transition: width 5s linear 0s; } .box:hover { width: 500px; } </style> </head> <body> <div class="box"> </div> </body> </html> 就是需要过渡的的加属性值transition,第一个值为变化的属性 哪些属性可以参与过渡
all:
<!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> .box { width: 200px; height: 200px; background-color: black; transition: width 5s linear 0s; } .box:hover { width: 500px; } .box1{ width: 200px; height: 200px; background-color: blue; transition: all 5s linear 0s; } .box1:hover { width: 400px; height: 200px; background-color: greenyellow; border-radius: 50%; } </style> </head> <body> <div class="box"></div> <div class="box1"></div> </body> </html> 过渡的缓动效果:缓动参数
常用的缓动参数子属性transition-timing-function:ease; <!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; } .box1 { border:1px solid black; } .box1 p{ width: 50px; height: 50px; background-color: blue; position: relative; left: 0; margin-bottom: 10px; transition: left 5s linear 0s; } .box1 p:nth-child(2) { transition-timing-function: ease; } .box1 p:nth-child(3) { transition-timing-function: ease-in; } .box1 p:nth-child(4) { transition-timing-function: ease-out; } .box1 p:nth-child(5) { transition-timing-function: ease-in-out; } .box1:hover p { left: 100px; } </style> </head> <body> <div class="box1"> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </body> </html> 贝塞尔曲线:
到此这篇关于CSS3使用过度动画和缓动效果案例讲解的文章就介绍到这了,更多相关CSS3使用过度动画和缓动效果内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界! |
请发表评论