h5百褶窗图片动画

本文介绍如何在一个页面中使用多个Canvas元素,并为每个Canvas设置旋转动画效果。通过不同的动画延迟时间实现依次展开的视觉效果,并从一个隐藏的图片元素中获取图像数据进行绘制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
			<title></title>
			<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>  
			<style>
			.oneDiv{width: 300px;height: 300px;background: url('2.jpg') no-repeat;background-size: 100% 100%;}
			.canvasDIV{float: left;opacity: 0;}
			.d1{animation:action_rotateY 0.5s linear 1.0s 1;animation-fill-mode:forwards;}
			.d2{animation:action_rotateY 0.5s linear 1.5s 1;animation-fill-mode:forwards;}
			.d3{animation:action_rotateY 0.5s linear 2.0s 1;animation-fill-mode:forwards;}
			.d4{animation:action_rotateY 0.5s linear 2.5s 1;animation-fill-mode:forwards;}
			.d5{animation:action_rotateY 0.5s linear 3.0s 1;animation-fill-mode:forwards;}
			.d6{animation:action_rotateY 0.5s linear 3.5s 1;animation-fill-mode:forwards;}
				 
@keyframes action_rotateY{  
    0%{transform: rotateY(0deg);opacity: 0;}  
    50%{ transform: rotateY(180deg);opacity: 0.2;}  
    100%{ transform: rotateY(360deg);opacity: 1;}  
}
			</style>
	</head>

	<body>

	 
多个canvas最好放到不同的div中,如果多个canvas放到一个div里,会被canvas自动嵌套canvas		
<div class="oneDiv">
		<div class="canvasDIV d1">
			<canvas id="myCanvas1" width="50" height="300"></canvas>
		</div>
		
		
		<div class="canvasDIV d2">
			<canvas id="myCanvas2" width="50" height="300"></canvas>
		</div>
		
		<div class="canvasDIV d3">
			<canvas id="myCanvas3" width="50" height="300"></canvas>
		</div>
		
		
		<div class="canvasDIV d4">
			<canvas id="myCanvas4" width="50" height="300"></canvas>
		</div>
		
		
		<div class="canvasDIV d5">
			<canvas id="myCanvas5" width="50" height="300"></canvas>
		</div>
		
		
		<div class="canvasDIV d6">
			<canvas id="myCanvas6" width="50" height="300"></canvas>
		</div>
		
		<img src="1.jpg" style="display: none;" id="img">
</div> 

			<script>
				var ctx1 = document.getElementById("myCanvas1").getContext("2d");
				var ctx2 = document.getElementById("myCanvas2").getContext("2d");
				var ctx3 = document.getElementById("myCanvas3").getContext("2d");
				var ctx4 = document.getElementById("myCanvas4").getContext("2d");
				var ctx5 = document.getElementById("myCanvas5").getContext("2d");
				var ctx6 = document.getElementById("myCanvas6").getContext("2d");
				/*
				var img = new Image();//在ios中,这个需要多一步创建图片img=new MegaPixImage(img)
     		img.src = "1.jpg";
				*/
				
				var img=document.getElementById("img");
				img.onload = function() {
					ctx1.drawImage(img, 0, 0, 50, 300, 0, 0, 50, 300);
					ctx2.drawImage(img, 50, 0, 50, 300, 0, 0, 50, 300);
					ctx3.drawImage(img, 100, 0, 50, 300, 0, 0, 50, 300);
					ctx4.drawImage(img, 150, 0, 50, 300, 0, 0, 50, 300);
					ctx5.drawImage(img, 200, 0, 50, 300, 0, 0, 50, 300);
					ctx6.drawImage(img, 250, 0, 50, 300, 0, 0, 50, 300);
				}
			</script>

	</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值