html5七夕情人节送花动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5七夕情人节送花动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>html5七夕情人节送花动画特效 </title>
<link rel='stylesheet' href='css/55c16d94000109f300000000.css' />
<link rel='stylesheet' href='css/55c16dab0001286100000000.css' />
<link rel='stylesheet' href='css/55c16dc00001fa1a00000000.css' />
<link rel='stylesheet' href='css/55c16dda0001113100000000.css' />

<script type="text/javascript" src="js/55ac9a860001a6c500000000.js"></script>
<script type="text/javascript" src="js/55ac9ea30001ace700000000.js"></script>
<script type="text/javascript" src="js/55c16c910001e21b00000000.js"></script>

</head>

<body>
<div id='content'>
    <ul class='content-wrap'>
        <!-- 第一副画面 -->
        <li>
            <!-- 背景图 -->
            <div class="a_background">
                <div class="a_background_top"></div>
                <div class="a_background_middle"></div>
                <div class="a_background_botton"></div>
            </div>
            <!-- 云 -->
            <div class="cloudArea">
                <div class="cloud cloud1"></div>
                <div class="cloud cloud2"></div>
            </div>
            <!-- 太阳 -->
            <div id="sun"></div>
        </li>
        <!-- 第二副画面 -->
        <li>
            <!-- 背景图 -->
            <div class="b_background"></div>
            <div class="b_background_preload"></div>
            <!-- 商店 -->
            <div class="shop">
                <div class="door">
                    <div class="door-left"></div>
                    <div class="door-right"></div>
                </div>
                <!-- 灯 -->
                <div class="lamp"></div>
            </div>
            <!-- 鸟 -->
            <div class="bird"></div>
        </li>
        <!-- 第三副画面 -->
        <li>
            <!-- 背景图 -->
            <div class="c_background">
                <div class="c_background_top"></div>
                <div class="c_background_middle"></div>
                <div class="c_background_botton"></div>
            </div>
            <!-- 小女孩 -->
            <div class="girl"></div>
            <div class="bridge-bottom">
                <div class="water">
                    <div id="water1" class="water_1"></div>
                    <div id="water2" class="water_2"></div>
                    <div id="water3" class="water_3"></div>
                    <div id="water4" class="water_4"></div>
                </div>
            </div>
            <!-- 星星 -->
            <ul class="stars">
                <li class="stars1"></li>
                <li class="stars2"></li>
                <li class="stars3"></li>
                <li class="stars4"></li>
                <li class="stars5"></li>
                <li class="stars6"></li>
            </ul>
            <!-- 慕课网logo图 -->
            <div class="logo">祝天下有情人终成眷属</div>
        </li>
    </ul>
    <!-- 雪花 -->
    <div id="snowflake"></div>
    <!-- 小男孩 -->
    <div id="boy" class="charector"></div>
</div>
</body>
</html>

JS代码(55c16c910001e21b00000000.js):

var Qixi=function(){
	var confi={
	keepZoomRatio:false,layer:{
	"width":"100%","height":"100%","top":0,"left":0}
,audio:{
	enable:true,playURl:"music/happy.mp3",cycleURL:"music/circulation.mp3"}
,setTime:{
	walkToThird:6000,walkToMiddle:6500,walkToEnd:6500,walkTobridge:2000,bridgeWalk:2000,walkToShop:1500,walkOutShop:1500,openDoorTime:800,shutDoorTime:500,waitRotate:850,waitFlower:800}
,snowflakeURl:["images/55adde120001d34e00410041.png","images/55adde2a0001a91d00410041.png","images/55adde5500013b2500400041.png","images/55adde62000161c100410041.png","images/55adde7f0001433000410041.png","images/55addee7000117b500400041.png"]}
;
	var debug=0;
	if(debug){
	$.each(confi.setTime,function(key,val){
	confi.setTime[key]=500}
)}
if(confi.keepZoomRatio){
	var proportionY=900/1440;
	var screenHeight=$(document).height();
	var zooomHeight=screenHeight*proportionY;
	var zooomTop=(screenHeight-zooomHeight)/2;
	confi.layer.height=zooomHeight;
	confi.layer.top=zooomTop}
var instanceX;
	var container=$("#content");
	container.css(confi.layer);
	var visualWidth=container.width();
	var visualHeight=container.height();
	var getValue=function(className){
	var $elem=$(""+className+"");
	return{
	height:$elem.height(),top:$elem.position().top}
}
;
	var pathY=function(){
	var data=getValue(".a_background_middle");
	return data.top+data.height/2}
();
	var bridgeY=function(){
	var data=getValue(".c_background_middle");
	return data.top}
();
	var animationEnd=(function(){
	var explorer=navigator.userAgent;
	if(~explorer.indexOf("WebKit")){
	return"webkitAnimationEnd"}
return"animationend"}
)();
	if(confi.audio.enable){
	var audio1=Hmlt5Audio(confi.audio.playURl);
	audio1.end(function(){
	Hmlt5Audio(confi.audio.cycleURL,true)}
)}
var swipe=Swipe(container);
	function scrollTo(time,proportionX){
	var distX=visualWidth*proportionX;
	swipe.scrollTo(distX,time)}
var girl={
	elem:$(".girl"),getHeight:function(){
	return this.elem.height()}
,rotate:function(){
	this.elem.addClass("girl-rotate")}
,setOffset:function(){
	this.elem.css({
	left:visualWidth/2,top:bridgeY-this.getHeight()}
)}
,getOffset:function(){
	return this.elem.offset()}
,getWidth:function(){
	return this.elem.width()}
}
;
	var bird={
	elem:$(".bird"),fly:function(){
	this.elem.addClass("birdFly");
	this.elem.transition({
	right:visualWidth}
,15000,"linear")}
}
;
	var logo={
	elem:$(".logo"),run:function(){
	this.elem.addClass("logolightSpeedIn").on(animationEnd,function(){
	$(this).addClass("logoshake").off()}
)}
}
;
	var boy=BoyWalk();
	boy.walkTo(confi.setTime.walkToThird,0.6).then(function(){
	scrollTo(confi.setTime.walkToMiddle,1);
	return boy.walkTo(confi.setTime.walkToMiddle,0.5)}
).then(function(){
	bird.fly()}
).then(function(){
	boy.stopWalk();
	return BoyToShop(boy)}
).then(function(){
	girl.setOffset();
	scrollTo(confi.setTime.walkToEnd,2);
	return boy.walkTo(confi.setTime.walkToEnd,0.15)}
).then(function(){
	return boy.walkTo(confi.setTime.walkTobridge,0.25,(bridgeY-girl.getHeight())/visualHeight)}
).then(function(){
	var proportionX=(girl.getOffset().left-boy.getWidth()-instanceX+girl.getWidth()/5)/visualWidth;
	return boy.walkTo(confi.setTime.bridgeWalk,proportionX)}
).then(function(){
	boy.resetOriginal();
	setTimeout(function(){
	girl.rotate();
	boy.rotate(function(){
	logo.run();
	snowflake()}
)}
,confi.setTime.waitRotate)}
);
	function BoyWalk(){
	var $boy=$("#boy");
	var boyWidth=$boy.width();
	var boyHeight=$boy.height();
	$boy.css({
	top:pathY-boyHeight+25}
);
	function pauseWalk(){
	$boy.addClass("pauseWalk")}
function restoreWalk(){
	$boy.removeClass("pauseWalk")}
function slowWalk(){
	$boy.addClass("slowWalk")}
function stratRun(options,runTime){
	var dfdPlay=$.Deferred();
	restoreWalk();
	$boy.transition(options,runTime,"linear",function(){
	dfdPlay.resolve()}
);
	return dfdPlay}
function walkRun(time,dist,disY){
	time=time||3000;
	slowWalk();
	var d1=stratRun({
	"left":dist+"px","top":disY?disY:undefined}
,time);
	return d1}
function walkToShop(doorObj,runTime){
	var defer=$.Deferred();
	var doorObj=$(".door");
	var offsetDoor=doorObj.offset();
	var doorOffsetLeft=offsetDoor.left;
	var offsetBoy=$boy.offset();
	var boyOffetLeft=offsetBoy.left;
	instanceX=(doorOffsetLeft+doorObj.width()/2)-(boyOffetLeft+$boy.width()/2);
	var walkPlay=stratRun({
	transform:"translateX("+instanceX+"px),scale(0.3,0.3)",opacity:0.1}
,2000);
	walkPlay.done(function(){
	$boy.css({
	opacity:0}
);
	defer.resolve()}
);
	return defer}
function walkOutShop(runTime){
	var defer=$.Deferred();
	restoreWalk();
	var walkPlay=stratRun({
	transform:"translate("+instanceX+"px,0px),scale(1,1)",opacity:1}
,runTime);
	walkPlay.done(function(){
	defer.resolve()}
);
	return defer}
function calculateDist(direction,proportion){
	return(direction=="x"?visualWidth:visualHeight)*proportion}
return{
	walkTo:function(time,proportionX,proportionY){
	var distX=calculateDist("x",proportionX);
	var distY=calculateDist("y",proportionY);
	return walkRun(time,distX,distY)}
,stopWalk:function(){
	pauseWalk()}
,resetOriginal:function(){
	this.stopWalk();
	$boy.removeClass("slowWalk slowFlolerWalk").addClass("boyOriginal")}
,toShop:function(){
	return walkToShop.apply(null,arguments)}
,outShop:function(){
	return walkOutShop.apply(null,arguments)}
,rotate:function(callback){
	restoreWalk();
	$boy.addClass("boy-rotate");
	if(callback){
	$boy.on(animationEnd,function(){
	callback();
	$(this).off()}
)}
}
,getWidth:function(){
	return $boy.width()}
,getDistance:function(){
	return $boy.offset().left}
,talkFlower:function(){
	$boy.addClass("slowFlolerWalk")}
}
}
var BoyToShop=function(boyObj){
	var defer=$.Deferred();
	var $door=$(".door");
	var doorLeft=$(".door-left");
	var doorRight=$(".door-right");
	function doorAction(left,right,time){
	var defer=$.Deferred();
	var count=2;
	var complete=function(){
	if(count==1){
	defer.resolve();
	return}
count--}
;
	doorLeft.transition({
	"left":left}
,time,complete);
	doorRight.transition({
	"left":right}
,time,complete);
	return defer}
function openDoor(time){
	return doorAction("-50%","100%",time)}
function shutDoor(time){
	return doorAction("0%","50%",time)}
function talkFlower(){
	var defer=$.Deferred();
	boyObj.talkFlower();
	setTimeout(function(){
	defer.resolve()}
,confi.setTime.waitFlower);
	return defer}
var lamp={
	elem:$(".b_background"),bright:function(){
	this.elem.addClass("lamp-bright")}
,dark:function(){
	this.elem.removeClass("lamp-bright")}
}
;
	var waitOpen=openDoor(confi.setTime.openDoorTime);
	waitOpen.then(function(){
	lamp.bright();
	return boyObj.toShop($door,confi.setTime.walkToShop)}
).then(function(){
	return talkFlower()}
).then(function(){
	return boyObj.outShop(confi.setTime.walkOutShop)}
).then(function(){
	shutDoor(confi.setTime.shutDoorTime);
	lamp.dark();
	defer.resolve()}
);
	return defer}
;
	function snowflake(){
	var $flakeContainer=$("#snowflake");
	function getImagesName(){
	return confi.snowflakeURl[[Math.floor(Math.random()*6)]]}
function createSnowBox(){
	var url=getImagesName();
	return $('<div class="snowbox" />').css({
	"width":41,"height":41,"position":"absolute","backgroundSize":"cover","zIndex":100000,"top":"-41px","backgroundImage":"url("+url+")"}
).addClass("snowRoll")}
setInterval(function(){
	var startPositionLeft=Math.random()*visualWidth-100,startOpacity=1;
	endPositionTop=visualHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*500,duration=visualHeight*10+Math.random()*5000;
	var randomStart=Math.random();
	randomStart=randomStart<0.5?startOpacity:randomStart;
	var $flake=createSnowBox();
	$flake.css({
	left:startPositionLeft,opacity:randomStart}
);
	$flakeContainer.append($flake);
	$flake.transition({
	top:endPositionTop,left:endPositionLeft,opacity:0.7}
,duration,"ease-out",function(){
	$(this).remove()}
)}
,200)}
function Hmlt5Audio(url,loop){
	var audio=new Audio(url);
	audio.autoplay=true;
	audio.loop=loop||false;
	audio.play();
	return{
	end:function(callback){
	audio.addEventListener("ended",function(){
	callback()}
,false)}
}
}
}
;
	$(function(){
	Qixi()}
);
	function Swipe(container,options){
	var element=container.find(":first");
	var swipe={
}
;
	var slides=element.find(">");
	var width=container.width();
	var height=container.height();
	element.css({
	width:(slides.length*width)+"px",height:height+"px"}
);
	$.each(slides,function(index){
	var slide=slides.eq[index];
	slides.eq(index).css({
	width:width+"px",height:height+"px"}
)}
);
	var isComplete=false;
	var timer;
	var callbacks={
}
;
	container[0].addEventListener("transitionend",function(){
	isComplete=true}
,false);
	function monitorOffet(element){
	timer=setTimeout(function(){
	if(isComplete){
	clearInterval(timer);
	return}
callbacks.move(element.offset().left);
	monitorOffet(element)}
,500)}
swipe.watch=function(eventName,callback){
	callbacks[eventName]=callback}
;
	swipe.scrollTo=function(x,speed){
	element.css({
	"transition-timing-function":"linear","transition-duration":speed+"ms","transform":"translate3d(-"+x+"px,0px,0px)"}
);
	return this}
;
	return swipe}
;

CSS代码(55c16dda0001113100000000.css):

.c_background{width:100%;height:100%;background-size:100% 100%;position:absolute}
.c_background_top{width:100%;height:71.6%;background-image:url("../images/55ade19b0001d92c14410645.png");background-size:100% 100%}
.c_background_middle{width:100%;height:13.1%;background-image:url("../images/55ade1b3000135c114410118.png");background-size:100% 100%}
.c_background_botton{width:100%;height:15.3%;background-image:url("../images/55ade1c30001db5d14410138.png");background-size:100% 100%}
#snowflake{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}
.snowRoll{position:absolute;opacity:0;-webkit-animation-name:mysnow;-webkit-animation-duration:20s;-moz-animation-name:mysnow;-moz-animation-duration:20s;height:80px}
@-webkit-keyframes mysnow{0%{bottom:100%}
50%{-webkit-transform:rotate(1080deg)}
100%{-webkit-transform:rotate(0deg) translate3d(50px,50px,50px)}
}
@-moz-keyframes mysnow{0%{bottom:100%}
50%{-moz-transform:rotate(1080deg)}
100%{-moz-transform:rotate(0deg) translate3d(50px,50px,50px)}
}
.girl{background:url(../images/55ade30d000100dc10570291.png) -755px -0px no-repeat;position:absolute;right:40%;top:37%;width:151px;height:291px}
.girl-rotate{-webkit-animation-name:girl-rotate;-webkit-animation-duration:850ms;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:step-start;-webkit-animation-fill-mode:forwards;-moz-animation-name:girl-rotate;-moz-animation-duration:850ms;-moz-animation-iteration-count:1;-moz-animation-timing-function:step-start;-moz-animation-fill-mode:forwards}
@-webkit-keyframes girl-rotate{0%{background-position:-604px -0px}
16.7%{background-position:-151px -0px}
33.4%{background-position:-906px -0px}
50.1%{background-position:-0px -0px}
66.8%{background-position:-302px -0px}
83.5%{background-position:-453px -0px}
100%{background-position:-604px -0px}
}
@-moz-keyframes girl-rotate{16.7%{background-position:-151px -0px}
33.4%{background-position:-906px -0px}
50.1%{background-position:-0px -0px}
66.8%{background-position:-302px -0px}
83.5%{background-position:-453px -0px}
100%{background-position:-604px -0px}
}
.bridge-bottom{position:absolute;width:41%;height:24%;left:29.5%;top:76%;overflow:hidden}
.water{width:100%;height:100%}
.water_1,.water_2,.water_3,.water_4{width:100%;position:absolute;height:50%;-webkit-animation-name:shake;-webkit-animation-duration:40s;-webkit-animation-direction:alternate;-webkit-anination-timing-function:linear;-webkit-animation-iteration-count:infinite;-moz-animation-name:shake;-moz-animation-duration:40s;-moz-animation-direction:alternate;-moz-anination-timing-function:linear;-moz-animation-iteration-count:infinite}
.water_1{width:131px;height:15px;top:13%;left:35%;background:url(../images/55ade1e000010f2908540027.png) -261px -0px no-repeat}
.water_2{width:161px;height:9px;top:25%;left:45%;background:url(../images/55ade1e000010f2908540027.png) -693px -0px no-repeat;-webkit-animation-delay:2s;-moz-animation-delay:2s}
.water_3{width:261px;height:29px;top:50%;left:15%;background:url(../images/55ade1e000010f2908540027.png) -0px -0px no-repeat;-webkit-animation-delay:1s;-moz-animation-delay:1s}
.water_4{width:301px;height:12px;top:70%;left:30%;background:url(../images/55ade1e000010f2908540027.png) -392px -0px no-repeat;-webkit-animation-delay:3s;-moz-animation-delay:3s}
@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0)}
10%,30%,50%,70%,90%{-webkit-transform:translate3d(-30px,0px,0)}
20%,40%,60%,80%{-webkit-transform:translate3d(30px,0px,0)}
}
@-moz-keyframes shake{0%,100%{-moz-transform:translate3d(0,0,0)}
10%,30%,50%,70%,90%{-moz-transform:translate3d(-30px,0px,0)}
20%,40%,60%,80%{-moz-transform:translate3d(30px,0px,0)}
}
.stars{width:100%;height:100%;position:absolute}
.stars > li{position:absolute;width:30px;height:31px;background-image:url("../images/55ade1fe00016b8900300031.png");-webkit-animation-name:flash;-webkit-animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;-moz-animation-name:flash;-moz-animation-timing-function:ease-in-out;-moz-animation-iteration-count:infinite;-moz-animation-direction:alternate}
.stars1{top:20%;left:30%;-webkit-animation-duration:5s;-moz-animation-duration:5s}
.stars2{top:15%;left:20%;-webkit-animation-duration:20s;-moz-animation-duration:20s}
.stars3{top:25%;left:85%;-webkit-animation-duration:15s;-moz-animation-duration:15s}
.stars4{top:30%;left:70%;-webkit-animation-duration:25s;-moz-animation-duration:25s}
.stars5{top:25%;left:20%;-webkit-animation-duration:30s;-moz-animation-duration:30s}
.stars6{top:10%;left:65%;-webkit-animation-duration:10s;-moz-animation-duration:10s}
@-webkit-keyframes flash{0%,50%,100%{opacity:1}
25%,75%{opacity:0}
}
@-moz-keyframes flash{0%,50%,100%{opacity:1}
25%,75%{opacity:0}
}
.logo{width:385px;height:81px;/*background-image:url(../images/55ade2110001708401850081.png);*/
 font-family:寰蒋闆呴粦;color:white;font-size:30px;z-index:999999;position:absolute;left:47%;margin-left:-92.5px;top:30px;display:none}
.logolightSpeedIn{display:block;-webkit-animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;-webkit-animation-duration:1s;-moz-animation-name:lightSpeedIn;-moz-animation-timing-function:ease-out;-moz-animation-duration:1s}
@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}
60%{-webkit-transform:skewX(20deg);opacity:1}
80%{-webkit-transform:skewX(-5deg);opacity:1}
100%{-webkit-transform:none;opacity:1}
}
@-moz-keyframes lightSpeedIn{0%{-moz-transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}
60%{-moz-transform:skewX(20deg);opacity:1}
80%{-moz-transform:skewX(-5deg);opacity:1}
100%{-moz-transform:none;opacity:1}
}
.logoshake{-webkit-animation-name:logoshake;-webkit-animation-duration:.5s;-moz-animation-name:logoshake;-moz-animation-duration:.5s}
@-webkit-keyframes logoshake{0%,100%{-webkit-transform:translate3d(0,0,0)}
10%,30%,50%,70%,90%{-webkit-transform:translate3d(-5px,0,0)}
20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0)}
}
@-moz-keyframes logoshake{0%,100%{-moz-transform:translate3d(0,0,0)}
10%,30%,50%,70%,90%{-moz-transform:translate3d(-5px,0,0)}
20%,40%,60%,80%{-moz-transform:translate3d(10px,0,0)}
}

附件:下载该文件资源,减少时间成本(增值服务)