Web——day05——css3D

最新推荐文章于 2024-07-11 17:28:05 发布

子曰礼

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量66

点赞数

分类专栏： Web学习文章标签： css web

本文链接：https://blog.csdn.net/weixin_45792414/article/details/119280231

版权

Web学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS-3D效果

自定义运动轨迹
字体打印效果
视距
案例：奔跑的熊
案例：雪碧图/精灵图
3D旋转
3D空间旋转效果

自定义运动轨迹

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.bool{width: 100px; height: 100px;border-radius: 50%;background-color: aqua;
				/*animation: move 4s infinite;*/
				animation-name: move;
				animation-duration: 4s;/*动画持续时间*/
				animation-iteration-count: infinite;/*重复次数*/
				animation-timing-function: steps(100);/*速率*//*steps是设置步数的*/
				animation-direction: alternate;/*反方向进行运动*/
				animation-delay: 3s;/*过3秒在进行运动*/
			}
			/*自定义运动轨迹*/
			@keyframes move{
				0%{transform: translate(0,0);}
				25%{transform: translate(800px,0);}
				50%{transform: translate(800px,400px);}
				75%{transform: translate(0,400px);}
				100%{transform: translate(0,0);}
			}
			.bool:hover{
				animation-play-state: paused;/*悬停的时候停止运动*/
			}
		</style>
	</head>
	<body>
		<div class="bool"></div>
	</body>
</html>

代码运行结果：
在这里插入图片描述

字体打印效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>字体打印效果</title>
		<style>
			div{
				background-color: pink;
				font-size: 20px;
				width: 0;/*初始没有任何字显示*/
				border: 1px solid;
				overflow: hidden;
				/* 文本不能换行 */
				white-space: nowrap;
				animation: donghua 5s steps(10) forwards;
				/*steps(10) 总变换的长度200px,每一个字站20px，所以逐字出现的长度为10px*/
				/* animation-fill-mode: forwards; *//*动画结束后的状态：保持终点forwards 回到起点backwards(默认)*/
			}
			/*自定义动画，能够实现逐字打印 思路：逐步增加div的宽度*/
			@keyframes donghua{
				0%{width: 0;}
				100%{width: 200px;}
			}
		</style>
	</head>
	<body>
		<div>世纪佳缘我在这里等你</div>
	</body>
</html>

代码运行结果：
在这里插入图片描述

视距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				perspective: 1000px;
			}
			div{width: 100px;height: 100px;background-color: pink;}
			div:hover{
				transform:translate3d(0,0,-500px) ;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

代码运行结果：
在这里插入图片描述
请添加图片描述

案例：奔跑的熊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{background-color: #FFC0CB;}
			div{
				width: 200px;
				height: 100px;
				background-image: url(images/bear.png);
				background-position: 0 0;
				animation: donghua 1s steps(8) infinite ,move 8s infinite ;
				
			}
			/*加载运动中的小熊：原地运动*/
			@keyframes donghua{
			    0%{background-position: 0 0;}
				100%{background-position: 1600px 0;}
			}
			/*在水平方向移动位置的运动*/
			@keyframes move{
				0%{transform: translateX(0);}
				99.9%{transform: translateX(800px) ; }
				100%{transform: translateX(800px) rotateY(180deg);}
			}
			
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

代码运行结果：
在这里插入图片描述

案例：雪碧图/精灵图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css精灵图|雪碧图 spirit</title>
		<style>
			div{width: 209px;height: 209px;
			background-image: url(images/icorns.jpg);
			background-position: -387px -328px;}
		</style>
	</head>
	<body>
		<!-- css雪碧图：使用背景图定位 -->
		<div></div>
	</body>
</html>

代码的运行结果：
在这里插入图片描述

3D旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {perspective: 300px;}
			img { display: block; margin: 100px auto; transition: all 1s;}
			div:hover img {transform: rotateX(-45deg);}
		</style>
	</head>
	<body>
		<div><img src="images/pig.jpg"></div>
	</body>
</html>

代码的运行结果：
在这里插入图片描述

3D空间旋转效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{perspective: 1000px;}
			.box{
				width: 200px;
				height: 200px;
				position: relative;
				margin: 100px auto;
				transform-style: preserve-3d;/*开启3d空间*/
			}
			.box:hover{
				transition: all 1s;
				transform: rotate3d(0,1,0,60deg);
			}
			.box>.d1{
				background-color: pink;
				width: 100px;
				height: 100px;
				position: absolute;
				top:0;
				left:0;
				z-index: 1;
			}
			.box>.d2{
				background-color: purple;
				width: 100px;
				height: 100px;
				position: absolute;
				top:0;
				left:0;
				z-index: 2;
				transform: rotate3d(1,0,0,60deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="d1"></div>
			<div class="d2"></div>
		</div>
	</body>
</html>

代码的运行结果：
在这里插入图片描述

——The End

子曰礼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web——day05——css3D

CSS-3D效果自定义运动轨迹字体打印效果视距案例：奔跑的熊案例：雪碧图/精灵图3D旋转3D空间旋转效果自定义运动轨迹<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .bool{width: 100px; height: 100px;border-radius: 50%;background-co
复制链接

扫一扫