简易的JS特效

2021-01-08

原创字数统计: 1.1k | 阅读时长: 6分

QQ截图20210108204711

一些简单的小动画，too.

1、3D旋转相册

200212124455445

|´艸`)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>拳皇</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body,html{
				width: 100%;
				height: 100%;
			}
			body{
				background: url(img/bg.jpg);
				background-size: 100%;
				/* 景深 */
				perspective: 1000px;
			}
			.box{
				width: 220px;
				height: 350px;
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				transform-style: preserve-3d;
				animation: box 10s linear infinite;
			}
			@keyframes box{
				0%{
					transform:rotateX(10deg) rotateY(0deg);
				}
				25%{
					transform:rotateX(-10deg) rotateY(90deg);
				}
				50%{
					transform:rotateX(10deg) rotateY(180deg);
				}
				75%{
					transform:rotateX(-10deg) rotateY(270deg);
				}
				100%{
					transform:rotateX(10deg) rotateY(360deg);
				}
			}
			.box div{
				width: 220px;
				height: 350px;
				position: absolute;
			}
			.box div img{
				width: 220px;
				height: 350px;
				border-radius: 23px;
			}
			.pic01{
				transform:rotateY(36deg) translateZ(500px);
			}
			.pic02{
				transform: rotateY(72deg) translateZ(500px);
			}
			.pic03{
				transform: rotateY(108deg) translateZ(500px);
			}
			.pic04{
				transform: rotateY(144deg) translateZ(500px);
			}
			.pic05{
				transform: rotateY(180deg) translateZ(500px);
			}
			.pic06{
				transform: rotateY(216deg) translateZ(500px);
			}
			.pic07{
				transform: rotateY(252deg) translateZ(500px);
			}
			.pic08{
				transform: rotateY(288deg) translateZ(500px);
			}
			.pic09{
				transform: rotateY(324deg) translateZ(500px);
			}
			.pic10{
				transform: rotateY(360deg) translateZ(500px);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="pic01">
				<img src="img/01.jpg" >
			</div>
			<div class="pic02">
				<img src="img/02.jpg" >
			</div>
			<div class="pic03">
				<img src="img/03.jpg" >
			</div>
			<div class="pic04">
				<img src="img/04.jpg" >
			</div>
			<div class="pic05">
				<img src="img/05.jpg" >
			</div>
			<div class="pic06">
				<img src="img/06.jpg" >
			</div>
			<div class="pic07">
				<img src="img/07.jpg" >
			</div>
			<div class="pic08">
				<img src="img/08.jpg" >
			</div>
			<div class="pic09">
				<img src="img/09.jpg" >
			</div>
			<div class="pic10">
				<img src="img/10.jpg" >
			</div>
		</div>
	</body>
</html>

2、文字逐个显示

为了压缩图片所以提高了速度╮(╯▽╰)╭

GI2021211212444114F

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文字逐个显示</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background: black;
			}
			.content{
				font-size: 20px;
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="content">
			
		</div>
		
		<script type="text/javascript">
			 var content = document.querySelector(".content")
			 var index = 0
			 var text = "特朗普推特解封后首发视频：新政府于1月20日就职，违法者将付出代价。当地时间1月7日晚，美国总统特朗普在推特账号解封后首次发布内容。特朗普在视频中表示，那些闯入国会大厦的人“玷污了美国民主”，违法者必将付出代价。特朗普同时称，新政府将在1月20日就职，现在将专注于有序、顺利的政权过渡，需要的是“治愈和和解”。"
			 setInterval(function(){
				 if(index>=text.length){
					 clearInterval(null)
				 }
				 var temp =text.charAt(index)
				 content.innerHTML+=temp
				 index++
			 },10)
		</script>
	</body>
</html>

3、图片切换

GI56641515444F

|｀O′|

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易相册</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.album{
				height: 100vh;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background: black;
			}
			.big_img{
				width: 500px;
				height: 280px;
				background: url(img/01.jpg);
			}
			ul li{
				list-style: none;
			}
			#mini_list{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items:baseline ;
			}
			.mini_img img{
				width: 100px;
				height: 60px;
				transition: 1s;
				opacity: .7;
			}
			.mini_img img:hover{
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<div class="album">
			<div class="big_img"></div>
			<ul id="mini_list">
				<li class="mini_img mini_01"><img src="img/01.jpg" ></li>
				<li class="mini_img"><img src="img/02.jpg" ></li>
				<li class="mini_img"><img src="img/03.jpg" ></li>
				<li class="mini_img"><img src="img/04.jpg" ></li>
				<li class="mini_img"><img src="img/05.jpg" ></li>
			</ul>
		</div>
		<script type="text/javascript">
			var big_img = document.querySelector(".big_img")
			var mini_list = document.querySelectorAll(".mini_img img")
			//把小图的url赋值给大图
			for(var i=0;i<mini_list.length;i++){
				let temp = mini_list[i].src
				//这里用var不行，会形成闭包
				mini_list[i].onmouseover = function(){
					big_img.style.background="url(" + temp + ")"
				}
			}
		</script>
	</body>
</html>

第三个之中牵扯到Js闭包的问题，这个有必要单独拿出来研究一番。

ec2796cb0bc78531331fed52c898e224_9k=

o(^＠^)o

本文作者： 本该如此
本文链接： https://anyway521.github.io/post/7b395966.html
最后更新： 2021年01月09日 09:35:22
版权声明： 博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议进行许可，转载请注明出处！