前端2D、3D

最新推荐文章于 2025-11-11 10:38:07 发布

原创最新推荐文章于 2025-11-11 10:38:07 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

一、百度浏览器小熊案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background-color: skyblue;
				margin: 0;
				border: 0;
			}
			
			.bear{
				position: absolute;
				top: 220px;
				width: 200px;
				height: 100px;
				background: url(img/bear.png) no-repeat;
				animation: bear 1s steps(8) infinite,move 3s forwards;
			}
			.mountain{
				width: 3840px;
				height: 336px;
				background: url(img/mountain.png) no-repeat;
				animation: mountain 40s linear infinite;
			}
			@keyframes mountain{
				0%{
					background-position: 0 0;
				}
				100%{
					background-position: -2300px 0;
				}
			}
			@keyframes bear{
				0%{
					background-position: 0 0;
				}
				100%{
					background-position: -1600px 0;
				}
			}
			@keyframes move{
				0%{
					left:0;
				}
				100%{
					left: 50%;
					/*margin-left: -100px;*/
					transform: translateX(-50%);
				}
			}
		</style>
	</head>
	<body>
		<div class="mountain">
			<div class="bear">
			
		    </div>
		</div>
		
	</body>
</html>

1、动画使用：定义动画@keyframes name{
0%{开始状态}100%{结束状态}
}
，然后通过animation:name调用动画
linear是匀速,infinite是循环播放，backwords是播放完再倒回去，forwards是播放完直接回到开头
2、子绝父相：父盒子position：relative；子盒子position：absolute；
3、transform-origin:可以定义旋转的中心点
transform: translate(50px,50px);可以定义平移
transform:rotate(deg)可以定义旋转的角度
transition: all 0.3s;可以定义过渡时间过渡写到本身上，谁做动画给谁加
二、3D旋转：
1、transform-style: preserve-3d;/* 让子元素保持3d立体空间环境 /，必须写在做动画盒子的父盒子上
perspective: 500px;透视；必须写在做动画盒子的父盒子上
2、/ 如果有移动和其他transform样式，一定先写移动 */
例如 transform: translateY(17.5px);
transform: rotateX(-90deg);
三、C3选择器