html5 svg黑夜白晝切換動畫效果



152 606 203



特效描述:html5 svg 黑夜白晝 切換動畫效果,html5基于svg屬性制作白天和黑夜兩個場景切換動畫特效。

代碼結構

1. 引入JS

<script src="js/TweenMax.min.js"></script>

2. HTML代碼

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <title>Day And Night Toggle</title>
 <description>A user interface toggle with two options - a sun with a cloud that animates to a crescent moon with stars</description>
  <defs>
      <filter id="shadow" x="-100%" y="-100%" width="250%" height="250%">
        <feGaussianBlur stdDeviation="4" result="coloredBlur" />
        <feOffset dx="0" dy="0" result="offsetblur"></feOffset>
        <feFlood id="glowAlpha" flood-color="#000" flood-opacity="0.07"></feFlood>
        <feComposite in2="offsetblur" operator="in"></feComposite>
        <feMerge>
          <feMergeNode/>          
          <feMergeNode in="SourceGraphic"></feMergeNode>
        </feMerge>
      </filter>   
  	<mask id="moonMask">
<rect id="outlineFill"  x="225" y="215" width="350" height="170" rx="86" ry="86" fill="#FFF" stroke="#000" stroke-width="0"/>
<circle class="moonMask" cx="487" cy="300" r="66" fill="#06070B"/>
  	</mask>
   <clipPath id="outlineMask">
    <use xlink:href="#outlineFill"/>
   </clipPath>
<path id="cloud" d="M20.67,42.52h39c22,0,18-16.52,11.19-17.51,1.93-7.5-1.94-25-23.19-25s-24,18-24,18S12.75,13.2,5,18.83C-3.8,25.15-2.33,42.52,20.67,42.52Z"/>   
  </defs>
    <g class="whole" >
      <rect class="outline" x="220" y="210" width="360" height="180" rx="90" ry="90" fill="#85E8FE" stroke="#FCFDFE" stroke-width="10"/>
      <g class="starGroup" fill="#FFF" clip-path="url(#outlineMask)">
        <polygon points="405 248.25 406.58 254.42 412.75 256 406.58 257.58 405 263.75 403.42 257.58 397.25 256 403.42 254.42 405 248.25"/>
        <path d="M427.33,301.9a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
        <path d="M402.59,367.21a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
        <polygon points="447 325.5 450.17 337.83 462.5 341 450.17 344.17 447 356.5 443.83 344.17 431.5 341 443.83 337.83 447 325.5"/>
        <path d="M464,241.53a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
        <polygon points="496 274.25 497.58 280.42 503.75 282 497.58 283.58 496 289.75 494.42 283.58 488.25 282 494.42 280.42 496 274.25"/>
        <path d="M503.53,351.38a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
        <path d="M537.18,249.45a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
        <path d="M553,322.68a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"/>
      </g>     
      <circle class="sun" cx="486" cy="300" r="66" fill="#FEC100"/>
<g mask="url(#moonMask)">
      <circle class="moon" cx="403" cy="300" r="66" fill="#FFF" opacity="0"/>
  </g>
      <g class="planeGroup" fill="#FFF" clip-path="url(#outlineMask)" opacity="1">
        <path class="plane" d="M611.12,262.15l-7.16,0-6.48-5.43-1.06.58,1.93,4.88-3.67.06-3.48-3.37-.78.36,1.26,3.05h-.58a27.07,27.07,0,0,0,4.6,2.24s8.57,0,12.37,0H611c.65,0,2.19,0,2.19-1.25C613.19,262.26,612.05,262.15,611.12,262.15Z"  fill="#fff"/>
        <line class="contrail" x1="590.17" y1="264" x2="246.51" y2="264" fill="none" stroke="#fff" stroke-width="1"/>
     </g>
      <g class="cloudGroup" fill="#FFF" clip-path="url(#outlineMask)">
        <g class="cloud" filter="url(#shadow)">
          <rect x="515.79" y="314.92" width="47.15" height="10.37" rx="5.19" ry="5.19"/>
          <circle cx="521.45" cy="313.98" r="11.32"/>
          <circle cx="540.84" cy="305.91" r="15.61"/>
          <circle cx="556.82" cy="316.34" r="8.96"/>
        </g>       
        <g class="cloud"  filter="url(#shadow)">
         <rect x="397.85" y="349.02" width="92.34" height="10.37" rx="5.19" ry="5.19" transform="translate(888.03 708.41) rotate(180)"/>
          <circle cx="484.53" cy="348.08" r="11.32"/>
          <circle cx="432.65" cy="332.46" r="24.66"/>
          <circle cx="464.35" cy="338.11" r="17.51"/>
          <circle cx="404.21" cy="348.19" r="11.32"/>
        </g>
     </g>
    </g>
   <rect class="hit" x="220" y="210" width="360" height="180" rx="90" ry="90" fill="transparent" stroke="none" stroke-width="0"/>
</svg>
<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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 加載動畫 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 切換按鈕
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子