web前端复习第九课

最新推荐文章于 2025-04-07 13:20:53 发布

思丰百年

最新推荐文章于 2025-04-07 13:20:53 发布

阅读量161

点赞数

分类专栏： web前端开发复习，从头再来文章标签： javascript css html html5

本文链接：https://blog.youkuaiyun.com/qq_39664934/article/details/107290712

版权

web前端开发复习，从头再来专栏收录该内容

22 篇文章

订阅专栏

2D特效平移

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: skyblue;

			/*平移 ,可以为负值*/
			/*transform: translateX(20px) translateY(20px);*/
			/*简写的形式*/
			transform: translate(20px,50px);
		}
	</style>
</head>
<body>
	<div class="box">
		
	</div>
</body>
</html>

2D特效缩放

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: skyblue;
			margin: 100px auto;
			/*缩放*/
			/*取值范围0~1，超过1则放大，负值就是反向缩小，超过负一，则反向放大*/
			transform: scaleX(0.9) scaleY(0.5);
			/*简写形式*/
			transform: scale(0.5,0.5);
		}
	</style>
</head>
<body>
	<div class="box">
		hello word
	</div>
</body>
</html>

2D特效旋转

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: skyblue;
			margin: 100px auto;
			
			/*旋转*/
			/*transform: rotateX(45deg) rotateY(45deg);*/
			/*简写形式*/
			/*transform: rotate(40deg,0deg);*/
		
			transform: rotateZ(45deg);
	</style>
</head>
<body>
	<div class="box">
		hello word
	</div>
</body>
</html>

2D特效倾斜

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: skyblue;
			margin: 100px auto;
			
			/*倾斜*/
			transform: skewX(0deg) skewY(40deg);

			/*简写形式*/
			transform: skew(0deg,20deg);
		}
	</style>
</head>
<body>
	<div class="box">
		hello word
	</div>
</body>
</html>

原点变换

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: skyblue;
			margin: 100px auto;
			
			transform: rotateZ(0deg);

			/*原点变换*/
			/*可以用，top  left  right  bottom  center  改变变换的原点*/
			/*也可以用px值去表示*/
			/*也可以用百分比去表示*/
			transform-origin: 50% 75%;
		}
	</style>
</head>
<body>
	<div class="box">
		hello word
	</div>
</body>
</html>

过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: skyblue;
			margin: 100px auto;
		}
		.box:hover{
			width: 1000px;
			height: 400px;
			background-color: red;
			/*先指定一下需要过渡的属性*/
			/*可以单独指定，多个中间用逗号分割，all代表所有属性*/
			transition-property: all;
			/*指定过渡持续时间*/
			transition-duration: 10s;
			/*指定过渡的效果*/
			transition-timing-function: cubic-bezier(0,1.84,1,-1.03);
			/*过渡开始之前的延迟时间*/
			transition-delay: 1s;

			/*简写形式*/
			transition: all 10s 1s;
						/*指定的需要过渡的属性，执行时间，执行开始的延迟时间*/
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			/*定义动画的名称*/
			animation-name: myanimation;
			/*定义动画开始之前的延迟时间*/
			animation-delay: 1s;
			/*定义动画执行时间*/
			animation-duration: 5s;
			/*定义动画执行效果*/
			animation-timing-function: ease;
			/*定义动画的执行次数，可以用数字代替，执行几次，也可以用infinite无限执行*/
			animation-iteration-count: infinite;
			/*定义当前动画效果播放的方向*/
			animation-direction: alternate;
			/*定义动画开始之前或者播放之后进行的操作。*/
			/*animation-fill-mode: both;*/
			/*定义动画状态的  paused暂停   running播放*/
			animation-play-state: running;
		}

		@keyframes myanimation{
			0%{
				transform: translate(0px,0px) rotateZ(0deg);
				background-color: #f00;
			}
			25%{
				transform: translate(400px,0px) rotateZ(360deg);
				background-color: #0f0;
			}
			50%{
				transform: translate(400px,400px) rotateZ(720deg);
				background-color: #00f;
			}
			75%{
				transform: translate(800px,400px) rotateZ(1080deg);
				background-color: #ff0;
			}
			100%{
				transform: translate(0px,0px) rotateZ(1440deg);
				background-color: #0ff;
			}
		}
	</style>
</head>
<body>
	<div class="box">
		
	</div>
</body>
</html>