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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
