HTML部分
<div id="petalbox"></div>
複製程式碼JS部分
(function() {
/* Define the number of leaves to be used in the animation */
var NUMBER_OF_LEAVES = 80;
/*
Called when the "Falling Leaves" page is completely loaded.
*/
function init() {
/* Get a reference to the element that will contain the leaves */
var container = document.getElementById('petalbox');
/* Fill the empty container with new leaves */
try {
for (var i = 0;
i < NUMBER_OF_LEAVES;
i++) {
container.appendChild(createALeaf());
}
}
catch(e) {
}
}
/*
Receives the lowest and highest values of a range and
returns a random integer that falls within that range.
*/
function randomInteger(low, high) {
return low + Math.floor(Math.random() * (high - low));
}
/*
Receives the lowest and highest values of a range and
returns a random float that falls within that range.
*/
function randomFloat(low, high) {
return low + Math.random() * (high - low);
}
/*
Receives a number and returns its CSS pixel value.
*/
function pixelValue(value) {
return value + 'px';
}
/*
Returns a duration value for the falling animation.
*/
function durationValue(value) {
return value + 's';
}
<!--w建立紅包-->
function createALeaf() {
/* Start by creating a wrapper div, and an empty img element */
var leafDiv = document.createElement('div');
var image = document.createElement('img');
/*紅包圖片地址（自己資料夾位置不同，值也不同） */
image.src ='images/hb/petal'+ randomInteger(1, 10) + '.png';
/* Position the leaf at a random location along the screen */
leafDiv.style.top = pixelValue(randomInteger(-200, -100));
leafDiv.style.left = pixelValue(randomInteger(0, 1920));
/* Randomly choose a spin animation */
var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin':'counterclockwiseSpinAndFlip'; /* Set the -webkit-animation-name property with these values */
leafDiv.style.webkitAnimationName ='fade, drop';
leafDiv.style.animationName ='fade, drop';
image.style.webkitAnimationName = spinAnimationName;
image.style.animationName = spinAnimationName;
/* 隨機下落時間 */
var fadeAndDropDuration = durationValue(randomFloat(1.2, 8.2));
/* 隨機旋轉時間 */
var spinDuration = durationValue(randomFloat(3, 4));
leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
leafDiv.style.animationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
// 隨機delay時間
var leafDelay = durationValue(randomFloat(0, 2));
leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;
leafDiv.style.animationDelay = leafDelay + ', ' + leafDelay;
image.style.webkitAnimationDuration = spinDuration;
image.style.animationDuration = spinDuration;
leafDiv.appendChild(image);
return leafDiv;
}
init();
}
)();
複製程式碼CSS部分
#petalbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 98;
pointer-events: none;
}
#petalbox > div {
position: absolute;
-webkit-animation-iteration-count: 1, 1;
-webkit-animation-direction: normal, normal;
-webkit-animation-timing-function: linear, ease-in;
-webkit-backface-visibility: hidden;
animation-iteration-count: 1, 1;
animation-direction: normal, normal;
animation-timing-function: linear, ease-in;
backface-visibility: hidden;
}
#petalbox > div >img {
position: absolute;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-backface-visibility: hidden;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
backface-visibility: hidden;
}
@-webkit-keyframes drop {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 1100px, 0);
}
}
@keyframes drop {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, 1100px, 0);
}
}
@-webkit-keyframes clockwiseSpin {
0% {
-webkit-transform: none;
}
100% {
-webkit-transform: rotate(480deg);
}
}
@keyframes clockwiseSpin {
0% {
transform: none;
}
100% {
transform: rotate(480deg);
}
}
@-webkit-keyframes counterclockwiseSpinAndFlip {
0% {
-webkit-transform: none;
}
100% {
-webkit-transform: rotate(-480deg);
}
}
@keyframes counterclockwiseSpinAndFlip {
0% {
transform: none;
}
100% {
transform: rotate(-480deg);
}
}
/*animation*/
.timenav .time_list .time1 {
-webkit-animation: lantern_shake1 3s linear both;
-webkit-transform-origin: center top;
animation: lantern_shake1 3s linear both;
transform-origin: center top;
}
@-webkit-keyframes lantern_shake1 {
0%, 50% {
-webkit-transform: none;
}
25% {
-webkit-transform: rotate(-4deg);
}
75% {
-webkit-transform: rotate(4deg);
}
}
@keyframes lantern_shake1 {
0%, 50% {
transform: none;
}
25% {
transform: rotate(-4deg);
}
75% {
transform: rotate(4deg);
}
}
.timenav .time_list .time2 {
-webkit-animation: lantern_shake2 3s linear both;
-webkit-transform-origin: center top;
-webkit-backface-visibility: hidden;
animation: lantern_shake2 3s linear both;
transform-origin: center top;
}
@-webkit-keyframes lantern_shake2 {
0%, 50% {
-webkit-transform: none;
}
25% {
-webkit-transform: rotate(-6deg) translate3d(5px, 0, 0);
}
75% {
-webkit-transform: rotate(6deg) translate3d(-5px, 0, 0);
}
}
@keyframes lantern_shake2 {
0%, 50% {
transform: none;
}
25% {
transform: rotate(-6deg) translate3d(5px, 0, 0);
}
75% {
transform: rotate(6deg) translate3d(-5px, 0, 0);
}
}
.timenav .time_list .time3 {
-webkit-animation: lantern_shake3 3s linear both;
-webkit-transform-origin: center top;
-webkit-backface-visibility: hidden;
animation: lantern_shake3 3s linear both;
transform-origin: center top;
}
@-webkit-keyframes lantern_shake3 {
0%, 50% {
-webkit-transform: none;
}
25% {
-webkit-transform: rotate(-8deg) translate3d(14px, 0, 0);
}
75% {
-webkit-transform: rotate(8deg) translate3d(-14px, 0, 0);
}
}
@keyframes lantern_shake3 {
0%, 50% {
transform: none;
}
25% {
transform: rotate(-8deg) translate3d(14px, 0, 0);
}
75% {
transform: rotate(8deg) translate3d(-14px, 0, 0);
}
}
.timenav .time_list:hover a {
-webkit-animation: none;
animation: none;
}
.banner_tit, .banner_subtit {
-webkit-animation: bounceInDown 0.8s both;
animation: bounceInDown 0.8s both;
}
.banner_subtit {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
@-webkit-keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
}
60% {
-webkit-transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
opacity: 1;
}
}
@keyframes bounceInDown {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
to {
transform: none;
opacity: 1;
}
}
.banner_time {
-webkit-animation: fadeIn 1s 1.2s both;
animation: fadeIn 1s 1.2s both;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fireworks i {
-webkit-animation: fireworkani 1.6s .2s ease both;
-webkit-animation-iteration-count: 2;
animation: fireworkani 1.6s .2s ease both;
animation-iteration-count: 2;
}
.fireworks .f2 {
-webkit-animation-delay: .6s;
animation-delay: .6s;
}
.fireworks .f3 {
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
.fireworks .f4 {
-webkit-animation-delay: .8s;
animation-delay: .8s;
}
@-webkit-keyframes fireworkani {
0%, 9% {
-webkit-transform: scale(.1);
opacity: 0;
}
10% {
-webkit-transform: scale(.1);
opacity: 1;
}
95% {
-webkit-transform: scale(1.5);
opacity: .1;
}
100% {
-webkit-transform: scale(1.5);
opacity: 0;
}
}
@keyframes fireworkani {
0%, 9% {
transform: scale(.1);
opacity: 0;
}
10% {
transform: scale(.1);
opacity: 1;
}
95% {
transform: scale(1.5);
opacity: .1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
.main_before, .main_after, .main_cont {
-webkit-animation: contfadein 1s .5s both;
animation: contfadein 1s .5s both;
}
@-webkit-keyframes contfadein {
0% {
-webkit-transform: translate3d(0, 100px, 0);
opacity: 0;
}
100% {
-webkit-transform: none;
opacity: 1;
}
}
@keyframes contfadein {
0% {
transform: translate3d(0, 100px, 0);
opacity: 0;
}
100% {
transform: none;
opacity: 1;
}
}複製程式碼