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>

复制代码