- 樱花飘落3D相册（含背景音乐）
- 在线演示地址
- 樱花代码如下：
- html代码
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.min.js"></script>
<link type="text/css" href="./css/style.css" rel="stylesheet" />
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }.container {
width: 100%;height: 100%;
margin: 0;padding: 0;background-color: #000000; }
</style>
</head>
<body>
<audio autoplay="autopaly">
<source src="renxi.mp3" type="audio/mp3" />
</audio><div id="jsi-cherry-container" class="container"><div class="box">
<ul class="minbox"><li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul><ol class="maxbox"><li></li><li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<script> .... </script></body> <
/html>
@charset "utf-8";
*{
margin:0; padding:0;
}
body{max-width: 100%;min-width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size:100% 100%;position: absolute; margin-left: auto;margin-right: auto;
}
li{ list-style: none;}
.box{ width:200px;height:200px;background-size: cover; background-repeat: no-repeat; background-attachment: fixed;background-size:100% 100%;position: absolute;margin-left: 42%;margin-top: 22%; -webkit-transform-style:preserve-3d;-webkit-transform:rotateX(13deg); -webkit-animation:move 5s linear infinite;
}
.minbox{ width:100px;height:100px;position: absolute; left:50px; top:30px; -webkit-transform-style:preserve-3d;
}
.minbox li{ width:100px; height:100px;position: absolute;left:0; top:0;
}
.minbox li:nth-child(1){background: url(../images/01.png) no-repeat 0 0; -webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
background: url(../images/02.png) no-repeat 0 0;-webkit-transform:rotateX(180deg) translateZ(50px);}.minbox li:nth-child(3){ background: url(../images/03.png) no-repeat 0 0;-webkit-transform:rotateX(-90deg) translateZ(50px);}
.minbox li:nth-child(4){ background: url(../images/04.png) no-repeat 0 0;-webkit-transform:rotateX(90deg) translateZ(50px);}.minbox li:nth-child(5){ background: url(../images/05.png) no-repeat 0 0;-webkit-transform:rotateY(-90deg) translateZ(50px);
}.minbox li:nth-child(6){ background: url(../images/06.png) no-repeat 0 0; -webkit-transform:rotateY(90deg) translateZ(50px);}
.maxbox li:nth-child(1){ background: url(../images/1.png) no-repeat 0 0; -webkit-transform:translateZ(50px);}
.maxbox li:nth-child(2){ background: url(../images/2.png) no-repeat 0 0; -webkit-transform:translateZ(50px);
}.maxbox li:nth-child(3){background: url(../images/3.png) no-repeat 0 0; -webkit-transform:rotateX(-90deg) translateZ(50px);}
.maxbox li:nth-child(4){ background: url(../images/4.png) no-repeat 0 0; -webkit-transform:rotateX(90deg) translateZ(50px);}
.maxbox li:nth-child(5){ background: url(../images/5.png) no-repeat 0 0; -webkit-transform:rotateY(-90deg) translateZ(50px);} .
maxbox li:nth-child(6){background: url(../images/6.png) no-repeat 0 0;-webkit-transform:rotateY(90deg) translateZ(50px); }
- js代码樱花飘落
- 在线演示
-
var RENDERER = {INIT_CHERRY_BLOSSOM_COUNT: 30,MAX_ADDING_INTERVAL: 10,init: function() {this.setParameters();this.reconstructMethods();this.createCherries();this.render();if (navigator.userAgent.match(/(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {var box = document.querySelectorAll('.box')[0];console.log(box, '移动端');box.style.marginTop = '65%';}},setParameters: function() {this.$container = $('#jsi-cherry-container');this.width = this.$container.width();this.height = this.$container.height();this.context = $('<canvas />').attr({ width: this.width, height: this.height }).appendTo(this.$container).get(0).getContext('2d');this.cherries = [];this.maxAddingInterval = Math.round((this.MAX_ADDING_INTERVAL * 1000) / this.width);this.addingInterval = this.maxAddingInterval;},reconstructMethods: function() {this.render = this.render.bind(this);},createCherries: function() {for (var i = 0,length = Math.round((this.INIT_CHERRY_BLOSSOM_COUNT * this.width) / 1000);i < length;i++) {this.cherries.push(new CHERRY_BLOSSOM(this, true));}},render: function() {requestAnimationFrame(this.render);this.context.clearRect(0, 0, this.width, this.height);this.cherries.sort(function(cherry1, cherry2) {return cherry1.z - cherry2.z;});for (var i = this.cherries.length - 1; i >= 0; i--) {if (!this.cherries[i].render(this.context)) {this.cherries.splice(i, 1);}}if (--this.addingInterval == 0) {this.addingInterval = this.maxAddingInterval;this.cherries.push(new CHERRY_BLOSSOM(this, false));}}};var CHERRY_BLOSSOM = function(renderer, isRandom) {this.renderer = renderer;this.init(isRandom);};
....
想要全部源码可私聊
