挺好看的一个html5白天和黑夜场景切换动画特效,基于html5 svg属性实现白天黑夜场景交替切换动画效果。
js代码
<script src="js/TweenMax.min.js"></script>
<script>
var select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
hit = select('.hit'),
allStars = selectAll('.starGroup *'),
allClouds = selectAll('.cloud'),
allCloudPuffs = selectAll('.cloud circle')
TweenMax.set('svg', {
visibility: 'visible'
})
TweenMax.set(allStars, {
transformOrigin:'50% 50%'
})
TweenLite.defaultEase = Elastic.easeOut.config(0.58,0.8);
var tl = new TimelineMax({paused:true});
tl.staggerTo(['.sun', '.moonMask', '.moon'], 1, {
cycle:{
attr:[{cx:'-=140', cy:'-=20'}, {cx:'-=140', cy:'-=20'}, {cx:'-=90', cy:'-=0'}]
}
},0)
.staggerTo(['.moon', '.sun'], 1, {
cycle:{
alpha:[1, 0]
}
},0,'-=1')
.to('body', 1, {
//backgroundColor:'#2C3E7B'
},'-=1')
.to('.outline', 1, {
stroke:'#6172AD',
fill:'#45568D'
},'-=1')
.staggerFrom(allStars, 0.9, {
cycle:{
x:[-20, 30, 40, -30, 60, -40, 80, 90, 100, 110, 120]
},
alpha:0
},0.005,'-=1')
.staggerTo(allClouds,1, {
cycle:{
x:[40, 20]
},
alpha:0
},0,'-=1')
.addPause()
.staggerTo(['.sun', '.moonMask', '.moon'], 1, {
cycle:{
attr:[{cx:'+=140', cy:'+=20'}, {cx:'+=140', cy:'+=20'}, {cx:'+=90', cy:'+=0'}]
}
},0)
.staggerTo(['.moon', '.sun'], 1, {
cycle:{
alpha:[0, 1]
}
},0,'-=1')
.to('body', 1, {
//backgroundColor:'#26D6FE',
ease:Linear.easeNone
},'-=1')
.to('.outline', 1, {
stroke:'#FCFDFE',
fill:'#85E8FE'
},'-=1')
.staggerTo(allStars, 1, {
alpha:0
},0,'-=1')
.staggerFromTo(allClouds, 0.6, {
cycle:{
y:[120, 160],
x:[0]
}
},
{ cycle:{
y:[0],
x:[0]
},
alpha:1,
immediateRender:false
},0.06,'-=1')
.from(['.plane', '.contrail'], 0.7, {
x:-400,
ease:Linear.easeNone
},'-=1')
.to('.contrail',0.5, {
alpha:0,
ease:Sine.easeOut
})
//ScrubGSAPTimeline(tl);
function clickToggle(e){
if(tl.time() > 0 && tl.time() < tl.duration()){
tl.play()
} else{
tl.play(0)
}
}
tl.timeScale(0.7)
hit.onclick = clickToggle;
//TweenMax.globalTimeScale(0.5)</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791