(7)开机动画2D版，开机动画3D版

最新推荐文章于 2024-05-23 23:33:04 发布

进阶路

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量184

点赞数 1

分类专栏：前端之HTML和CSS基础文章标签：动画 css3 前端

本文链接：https://blog.csdn.net/Q_999999/article/details/124927800

版权

前端之HTML和CSS基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、开机动画2D版

效果图：

注意点：

尽量不要操作body元素，可以设置一个div来继承body的宽高，以此模拟body
transform只对块级元素生效，span为内联元素，若要移动span的位置通过定位来实现

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			.box1{
				height: 100%;
				background-color: gray;
				position: relative;
			}
			.box1 > .box2{
				text-align: center;
				position: absolute;	/*设置定位后，宽度由内容撑开*/
				top: 50%;
				left: 50%;
				transform: translate3d(-50%,-50%,0);	/*未知高宽元素居中*/
				font-size: 20px;
				white-space: nowrap;
			}
			.box1 > .box2 > span{
				position: relative;	/*设置元素上下运动，要靠定位来实现，若设置绝对定位，所有的span会叠在一块，最终选择相对定位 */
				color: #ff0000;
/* 				animation: move 2s linear infinite alternate; */
			}
			 /*.box1 > .box2 >span:nth-child(2n+1){
				animation: move 2s linear infinite alternate;
			}
			.box1 > .box2 >span:nth-child(2n){
				animation: move 2s linear .2s infinite alternate;
			} */
			@keyframes move{
				from{
					top: 0px;
					/* transform: translateY(0px);/*transform只对块级元素生效，所以在这里设置并不会生效*/
				}
				to{
					top: -30px;
					/* transform: translateY(-20px); */
				}
			}
		</style>
	</head>
	<body>
		<div class="box1"><!--模拟body-->
			<div class="box2">
				<span>请</span>
				<span>耐</span>
				<span>心</span>
				<span>等</span>
				<span>待</span>
				<span>开</span>
				<span>机</span>
				<span>动</span>
				<span>画</span>
				<span>~</span>
				<span>~</span>
				<span>~</span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function(){
			var spanEle = document.querySelectorAll(".box1 > .box2 >span");
			var colors = ['red','orange','yellow','green','blue','blue','purple','red','orange','yellow','green','blue']
			for (var i = 0; i < spanEle.length; i++) {
				spanEle[i].style.animation = "move .5s "+(i*70)+"ms linear infinite alternate";
				spanEle[i].style.color = colors[i];
			}
		}
	</script>
</html>

2、开机动画3D版

效果图：

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			.box1{
				height: 100%;
				background-color: #00FF00;
				perspective: 200px;
			}
			.box1 > .box2{
				transform-style: preserve-3d;
				height: 100%;
			}
			.box1 > .box2 > img{
				width: 15%;
				margin-top: -70px;
				animation: move 2s linear infinite;
			}
			@keyframes move{
				from{
					transform: translate3d(-50%,-50%,0) rotateY(0deg) ;
				}
				to{
					transform: translate3d(-50%,-50%,0) rotateY(360deg);
				}
			}
			.box1 > .box2 > img,.box1 > .box2 > p{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate3d(-50%,-50%,0) rotateY(0deg) ;
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
				<img src="img/cloud2.png" />
				<p>已加载0%</p>
			</div>
		</div>
	</body>
	<script src="js/data.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			var pEle = document.querySelector('.box1 > .box2 > p');
			var flag = 0;
			var arr = [];	//arr数组要存放data.js中的所有图片
			for(item in imgData){
				arr = arr.concat(imgData[item]);
			}
			// debugger
			for(var i=0; i<arr.length;i++){
				var img = new Image();
				img.src = arr[i];	//拿到所有arr中图片的路径
				img.onload = function(){
					flag++;
					pEle.innerHTML = "已加载"+(Math.round(flag/arr.length*100))+"%";
				}
				img.onerror = function(){
					console.log('地址有问题')
				}
			}
		}
	</script>
</html>

进阶路

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(7)开机动画2D版，开机动画3D版

1、开机动画2D版效果图：注意点：尽量不要操作body元素，可以设置一个div来继承body的宽高，以此模拟body transform只对块级元素生效，span为内联元素，若要移动span的位置通过定位来实现源代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/c
复制链接

扫一扫