<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5 SVG卡通圣诞节圣诞老人动画代码</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin slice" viewBox="0 0 1920 1080" class="svg">
<defs>
<style type="text/css">
<![CDATA[
@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');
.bg {fill: #4285f4}
.footprint{fill:#4285f4}
.pink{fill:#ffafd4}
.red{fill:#900f10}
.white{fill:#fff}
.black{fill:#000}
.stroke{stroke:#000;stroke-width:1}
.txt{fill:#f0f7ff;font-family:'Luckiest Guy', cursive;font-size:60px;text-transform:uppercase;}
.hidden{opacity:0}
svg{width:100%;padding-bottom: 55.55%;height:1px;overflow: visible;visibility:hidden;}
]]>
</style>
</defs>
<script xlink:href="js/TweenMax.min.js" type="text/javascript"></script>
<script type="text/javascript">
<![CDATA[
document.addEventListener("DOMContentLoaded", function(event) {
window.onload = function() {
var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
one = document.getElementById("one"),
two = document.getElementById("two"),
three = document.getElementById("three"),
four = document.getElementById("four"),
five = document.getElementById("five"),
six = document.getElementById("six"),
look = document.getElementById("look"),
look2 = document.getElementById("look2"),
snow = document.getElementById("snow"),
snow2 = document.getElementById("snow2");
var mainTl = new TimelineMax({repeat:-1});
TweenMax.set("svg", {visibility: "visible"});
TweenMax.globalTimeScale(6);
TweenMax.lagSmoothing(500, 33);
TweenMax.set([one, two, three, four, five, six, look, look2], {autoAlpha:0});
TweenMax.set(look, {autoAlpha:0, attr:{ dx:"0,-32,-32,-32,-20,-29,-36,-40,-30,-30,0,-32,0,-40,-32,-40,-32,-28,-33,0,-30,0"}});
TweenMax.set(look2, {autoAlpha:0, attr:{ dx:"0,-35,-35,-35,0,-47,-35,-35,-34,0,-35,0"}})
function getSantaTl(){
var santaTl = new TimelineMax({repeat:-1});
santaTl.set(three,{autoAlpha:1})
.set(three,{autoAlpha:0},"+=1")
.set(two,{autoAlpha:1})
.set(two,{autoAlpha:0},"+=1")
.set(one,{autoAlpha:1})
.set(one,{autoAlpha:0},"+=2")
.set(two,{autoAlpha:1})
.set(two,{autoAlpha:0},"+=1")
.set(three,{autoAlpha:1})
.set(three,{autoAlpha:0},"+=1")
.set(four,{autoAlpha:1})
.set(four,{autoAlpha:0},"+=1")
.set(five,{autoAlpha:1})
.set(five,{autoAlpha:0},"+=1")
.set(six,{autoAlpha:1})
.add("christmas")
.set(six,{autoAlpha:0},"+=13")
.set(five,{autoAlpha:1})
.set(five,{autoAlpha:0},"+=1")
.set(four,{autoAlpha:1})
.add("christmasout")
.set(four,{autoAlpha:0},"+=1")
.set(three,{autoAlpha:1})
.set(three,{autoAlpha:0},"+=1")
.set(two,{autoAlpha:1})
.set(two,{autoAlpha:0},"+=1")
.set(one,{autoAlpha:1})
.set(one,{autoAlpha:0},"+=2")
.set(two,{autoAlpha:1})
.set(two,{autoAlpha:0},"+=1")
.set(three,{autoAlpha:1})
.set(three,{autoAlpha:0},"+=1")
.set(one,{autoAlpha:1})
.set(one,{autoAlpha:0},"+=2")
.set(three,{autoAlpha:1})
.set(three,{autoAlpha:0},"+=1")
.set(four,{autoAlpha:1})
.set(four,{autoAlpha:0},"+=1")
.set(five,{autoAlpha:1})
.set(five,{autoAlpha:0},"+=1")
.set(six,{autoAlpha:1})
.add("busy")
.set(six,{autoAlpha:0},"+=13")
.set(five,{autoAlpha:1})
.set(five,{autoAlpha:0},"+=1")
.set(four,{autoAlpha:1})
.add("busyout")
.set(four,{autoAlpha:0},"+=1")
.set(three,{autoAlpha:1})
.set(three,{autoAlpha:0},"+=1")
.set(two,{autoAlpha:1})
.set(two,{autoAlpha:0},"+=1")
.set(one,{autoAlpha:1})
.set(one,{autoAlpha:0},"+=2")
.set(two,{autoAlpha:1})
.set(two,{autoAlpha:0},"+=1")
.to(look, 8,{autoAlpha:1, x:75, attr:{dx:"0,2,2,2,2,2,2,2,2,0,0,2,0,0,2,2,2,2,2,0,0,0"}, ease:Power3.easeOut},"christmas")
.to(look, 6,{autoAlpha:0,attr:{dx:"20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20", dy:"100,-20,20,-20,20,-20,20,-20,20,-20,20,-20,20,-20,20,-20,20,-20,20,-20,20,-20", rotate:"-20,20,-20,20,-20,20,-20,20,-20,0,0,20,0,0,-20,20,-20,20,-20,20,0,-20"}, ease:Sine.easeOut},"christmasout")
.to(look2, 8,{autoAlpha:1, x:150, attr:{dx:"0,2,2,2,0,0,2,2,2,0,0,0"}, ease:Power3.easeOut},"busy")
.to(look2, 6,{autoAlpha:0, attr:{dx:"20,20,20,20,20,20,20,20,20,20,20,20", dy:"100,-20,20,-20,20,-20,20,-20,20,-20,20,-20", rotate:"-20,20,-20,20,0,0,-20,20,-20,20,0,-20"}, ease:Sine.easeOut},"busyout");
return santaTl;
}
function getSnowTl(){
var snowTl = new TimelineMax;
TweenMax.set(snow, {autoAlpha:0});
snowTl.set(snow, {autoAlpha:1})
.staggerTo("#snow circle", 54, {attr:{cy:365}, ease:Sine.easeIn, force3D:true, repeat:-1}, 3)
.set(snow, {autoAlpha:0});
return snowTl;
}
function getSnow2Tl(){
var snow2Tl = new TimelineMax;
TweenMax.set(snow2, {autoAlpha:0});
snow2Tl.set(snow2, {autoAlpha:1})
.staggerTo("#snow2 circle", 54, {attr:{cy:500}, ease:Sine.easeIn, force3D:true, repeat:-1}, 3)
.set(snow2, {autoAlpha:0});
return snow2Tl;
}
function init(){
mainTl.add(getSantaTl(),0).add(getSnowTl(),-54).add(getSnow2Tl(),-54);
}
init();
};
});
]]>
</script>
<path d="M0 0h1920v1080H0z" class="bg"/>
<path d="M0 840h1920v240H0z" fill="#f0f7ff"/>
<svg viewBox="0 0 960 540">
<path d="M0 0h1152v326H0z" class="bg"/>
<svg viewBox="80 -32 630 420">
<path fill="#f0f7ff" d="M-.91 327L1160 328v-70s-182-76-553-24C123 278 97.4 265-5.5 214l-.87 111z"/>
<g class="footprint" transform="translate(-5 15)" opacity=".3">
<ellipse cx="194" cy="295" ry="22.6" rx="93.3"/>
<path d="M403 288c-1 4-27 5-38 11-17 7-36-3-37-7 1-4 17-8 40-8 17 0 34 0 35 4z"/>
<path id="path8440-4" d="M482 266c-1 4-27 5-38 11-17 7-36-3-37-7 1-4 17-8 40-8 17 0 34 0 35 4z"/>
<path id="path8440-2" d="M559 275c-1 4-27 5-38 11-17 7-36-3-37-7 1-4 17-8 40-8 17 0 34 0 35 4z"/>
<path id="path8440-3" d="M617 253c-1 3-24 4-34 9-15 7-32-2-33-6 1-3 15-7
H5_canvasDemo合集.rar （54个子文件） 
H5_canvasDemo合集 HTML5 canvas幽灵鬼魂动画代码 js 
p5.min.js 258KB
index.html 3KB HTML5网页在线代码编辑器 codemirror mode css css.js 28KB xml xml.js 11KB javascript javascript.js 17KB htmlmixed htmlmixed.js 4KB addon edit closetag.js 4KB lib codemirror.css 6KB codemirror.js 221KB theme monokai.css 1KB index.html 1KB code-blast.js 5KB HTML5暴风雨闪电动画代码 index.html 7KB HTML5太空黑洞动画代码 css style.css 57B js jreejo.js 1KB index.js 6KB index.html 311B 3D——魔方 scripts textBox.js 841B main3.js 14KB tween.r12.js 14KB frames.js 65KB three.js 819KB ResizeableTextBox.3.js 2KB ierenderer.js 9KB iecss3d.js 9KB deviceMotion.js 2KB divBox.js 720B locked.js 7KB cuber.min.js 52KB certificate.js 11KB styles doodle2.css 8KB certificate2.css 3KB cube.css 3KB media 
static-cube.png 10KB index.html 3KB HTML5 canvas鼠标跟随植物生长动画 index.html 5KB HTML5 SVG百分比进度条代码 css an-skill-bar.css 3KB normalize.css 2KB demo.css 582B main.css 434B js an-skill-bar.js 671B jquery-1.11.0.min.js 94KB main.js 95B index.html 2KB HTML5 canvas树木生长动画代码 js drawTree.js 8KB jquery.min.js 91KB index.html 465B HTML5 canvas飞机飞行轨迹动画代码 img LsYmdkL.png 598B bYuAw4C.png 646B index.html 5KB HTML5 SVG卡通圣诞节圣诞老人动画代码 css style.css 289B js TweenMax.min.js 105KB index.js 202B index.html 38KB资源评论
文修
- 粉丝: 41
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
