css3过渡transition触发的5种方式
一般地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等
1、hover
鼠标悬停触发
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .stqf{ height: 100px; width: 100px; background-color: pink; transition-duration: 3s; transition-property: all; transition-timing-function: ease; transition-delay: 0s; } .stqf:hover { width: 500px; } </style> </head> <body> <div class="stqf"></div> </body> </html> 2、active
用户单击元素并按住鼠标时触发
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .stqf{ height: 100px; width: 100px; background-color: pink; transition-duration: 3s; } .stqf:active { width: 500px; } </style> </head> <body> <div class="stqf"></div> </body> </html> 3、
focus
获得焦点时触发
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .stqf{ height: 100px; width: 100px; background-color: pink; transition-duration: 3s; } .stqf:focus { width: 500px; } </style> </head> <body> <input class="stqf" placeholder="有焦点时，我会变长"> </body> </html> @media触发
符合媒体查询条件时触发
注意：下面的例子要把浏览器缩小于1000px才显示元素触发
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* 把浏览器的宽度拖动到小于1000px时触发 */ @media (max-width: 1000px){ .stqf{ height: 100px; width: 100px; background-color: pink; transition-duration: 3s; } .stqf:active { width: 500px; } } </style> </head> <body> <div class="stqf"></div> </body> </html> 点击事件
用户点击元素时触发
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .stqf{ height: 100px; width: 100px; background-color: pink; transition-duration: 3s; } </style> </head> <body> <div class="stqf" id="stqf"></div> </body> <script type="text/javascript"> stqf.onclick = function () { stqf.style.width = '300px'; setTimeout(function () { stqf.style.width = '100px'; }, 3000); } </script> </html>原文链接：https://www.qiquanji.com/post/7013.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。