css3过渡transition触发的5种方式

时间：6年前阅读：4263

一般地，过渡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,我们将及时处理。

微信扫码关注

更新实时通知

css3过渡transition触发的5种方式

网友评论