<!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>
h5百褶窗图片动画
最新推荐文章于 2022-07-29 19:36:28 发布