css3動畫效果

時間 2019-11-29

標籤 css3 css 動畫效果欄目 CSS 简体版

原文原文鏈接

1.transition（過渡）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div class="demo">

		</div>
	</body>
</html>
<style type="text/css">
	.demo {
		width: 200px;
		height: 200px;
		background-color: pink;
		transition: width 0.5s ease-in-out 0s, height 0.5s ease-in-out 0s;
	}

	.demo:hover {
		width: 600px;
		height: 600px;
	}
</style>

複製代碼

①屬性說明transition： transition-property（要過渡的屬性）、transition-duration（花費時間）、transition-timing-function（運動曲線）、transition-delay（什麼時候開始）css

②設置全部hover裏面的屬性都須要過渡能夠簡寫爲transition：all time（時間）；html

③同一個屬性裏面多個參數，能夠用逗號隔開css3

2.transform（變形）

######①移動：transform: translate translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。瀏覽器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div class="demo">

		</div>
	</body>
</html>
<style type="text/css"> .demo { width: 200px; height: 200px; background-color: pink; transition: all 0.5s; } .demo:active { /*點擊以後只移動X軸 */ /* transform: translateX(50px); */ /*點擊以後只移動Y軸 */ /* transform: translateY(50px); */ /*點擊以後只移動XY軸 */ /* transform: translate(300px, 300px); */ /*點擊以後只移動自身像素的百分比軸 */ transform: translate(60%); } .demo:hover { /*鼠標移上去div向上移動10px*/ margin-top: -10px; /*鼠標移上去div出現陰影邊框*/ box-shadow: 0 10px 5px rgba(0, 0, 0); } </style>
複製代碼

拓展：盒子定位在瀏覽器窗口居中對齊的完美寫法bash

.demo {
		width: 200px;
		height: 200px;
		background-color: pink;
		left: 50%;
		top: 50%;
		/*absolute是以父級的寬度和高度爲基準*/
		position: absolute;
		transform: translate(-50%, -50%);
	}
複製代碼

######②變形：transform: scale scale()方法，該元素增長或減小的大小，取決於寬度（X軸）和高度（Y軸）的參數拓展：鼠標放上去圖片變大動畫

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<section>
			<img src="img/test.jpg">
		</section>
	</body>
</html>

<style type="text/css">
	section {
		width: 500px;
		height: 322px;
		margin: 0 auto;
		overflow: hidden;
	}

	/*誰作動畫誰加過渡*/
	img {
		transition: all 0.5s;
	}

	/*鼠標通過section盒子的時候裏面的img縮放*/
	section:hover img {
		transform: scale(1.2);
	}
</style>

複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。