h5百褶窗图片动画

最新推荐文章于 2022-07-29 19:36:28 发布

原创最新推荐文章于 2022-07-29 19:36:28 发布 · 897 阅读

1 ·

CC 4.0 BY-SA版权

html5基础专栏收录该内容

68 篇文章

订阅专栏

本文介绍如何在一个页面中使用多个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>