整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          Html、Css、Javascript 實(shí)現(xiàn)「櫻花飄

          Html、Css、Javascript 實(shí)現(xiàn)「櫻花飄落」、「雪花飄落」特效

          下是使用HTML、CSS和JavaScript實(shí)現(xiàn)"櫻花飄落"和"雪花飄落"特效的簡(jiǎn)單示例:

          1. 櫻花飄落特效:

          HTML:

          ```html

          <div class="sakura-container">

          <img src="sakura.png" class="sakura" alt="sakura">

          </div>

          ```

          CSS:

          ```css

          .sakura-container {

          position: relative;

          height: 100vh;

          overflow: hidden;

          }

          .sakura {

          position: absolute;

          top: -50px;

          animation: sakura-fall 10s linear infinite;

          }

          @keyframes sakura-fall {

          0% {

          transform: translateY(0);

          }

          100% {

          transform: translateY(100vh);

          }

          }

          ```

          2. 雪花飄落特效:

          HTML:

          ```html

          <div class="snow-container">

          <span class="snowflake"></span>

          </div>

          ```

          CSS:

          ```css

          .snow-container {

          position: relative;

          height: 100vh;

          overflow: hidden;

          background-color: #000;

          }

          .snowflake {

          position: absolute;

          top: -10px;

          width: 10px;

          height: 10px;

          background-color: #fff;

          border-radius: 50%;

          animation: snow-fall 5s linear infinite;

          }

          @keyframes snow-fall {

          0% {

          transform: translateY(0) rotate(0deg);

          }

          100% {

          transform: translateY(100vh) rotate(360deg);

          }

          }

          ```

          JavaScript:

          ```javascript

          function createSnowflakes() {

          const snowContainer=document.querySelector('.snow-container');

          const numFlakes=50;

          for (let i=0; i < numFlakes; i++) {

          const snowflake=document.createElement('span');

          snowflake.classList.add('snowflake');

          snowflake.style.left=`${Math.random() * 100}%`;

          snowflake.style.animationDelay=`${Math.random() * 5}s`;

          snowContainer.appendChild(snowflake);

          }

          }

          createSnowflakes();

          ```

          將上述代碼保存為HTML文件,并在相應(yīng)的位置放置櫻花或雪花圖像,即可實(shí)現(xiàn)對(duì)應(yīng)特效。注意,需要在CSS中調(diào)整圖像和容器的樣式以適應(yīng)實(shí)際需求。這只是一個(gè)簡(jiǎn)單示例,您可以根據(jù)自己的喜好和需求進(jìn)行定制和擴(kuò)展。


          人在空間展示時(shí),用的到雪花飄動(dòng)的效果,mark收藏一下,簡(jiǎn)單的幾行代碼就搞定,以后在做論壇和空間等需求時(shí)方便不時(shí)之需;下圖是展示效果截圖:

          視頻展示截圖


          1.視頻播放展示效果 點(diǎn)擊觀看

          2.實(shí)現(xiàn)源碼:

          2.1 html

          <div id="nodeContent"></div>

          2.2 css

          html,body {

          width: 100%;

          margin: 0px;

          padding: 0px;

          }

          .backShowColor{

          background-color: black;

          }

          #nodeContent{

          position: fixed;

          z-index: 2;

          width: 100%;

          height: 100%;

          top: 0;

          overflow: hidden;

          }

          #nodeContent > div{

          position: absolute;

          max-width: 100px;

          max-height: 100px;

          -webkit-animation-iteration-count: infinitDatae, infinitDatae;

          -webkit-animation-direction: normal, normal;

          -webkit-animation-timing-function: linear, ease-in;

          }

          #nodeContent > div > img{

          width: 100%;

          -webkit-animation-iteration-count: infinitDatae;

          -webkit-animation-direction: alternate;

          -webkit-animation-timing-function: ease-in-out;

          -webkit-transform-origin: 50% -100%;

          }

          @-webkit-keyframes fade{

          0%{

          opacity: 1;

          }

          95%{

          opacity: 1;

          }

          100%{

          opacity: 0;

          }

          }

          @-webkit-keyframes drop{

          0%{

          -webkit-transform: translate(0px, -50px);

          }

          100%{

          -webkit-transform: translate(0px, 650px);

          }

          }

          @-webkit-keyframes clockwiseSpin{

          0%{

          -webkit-transform: rotate(-50deg);

          }

          100%{

          -webkit-transform: rotate(50deg);

          }

          }

          @-webkit-keyframes counterclockwiseSpinAndFlip

          {

          0% {

          -webkit-transform: scale(-1, 1) rotate(50deg);

          }

          100%{

          -webkit-transform: scale(-1, 1) rotate(-50deg);

          }

          }

          2.3 js

          function randomFloat(low, high){

          return low + Math.random() * (high - low);

          }

          function pixelValue(value){

          return value + 'px';

          }

          function initData(){

          // 原生js獲取nodeContent,可以使用jq$("#nodeContent")

          var container=document.getElementById('nodeContent');

          for (var i=0; i < 50; i++)

          {

          container.appendChild(createNode());

          }

          }

          function duration(value){

          return value + 's';

          }

          function randomNum(low, high){

          return low + Math.floor(Math.random() * (high - low));

          }

          // 創(chuàng)建

          function createNode(){

          // 創(chuàng)建dom

          var childDiv=document.createElement('div');

          var imgs=document.createElement('img');


          // 獲取資源

          imgs.src='static/snow' + randomNum(1, 10) + '.png';

          childDiv.style.top="-10px";

          childDiv.style.left=pixelValue(randomNum(0, 1500));


          // 創(chuàng)建動(dòng)畫

          var animationName=(Math.random() < 0.8) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';

          childDiv.style.webkitAnimationName='fade, drop';

          imgs.style.webkitAnimationName=animationName;


          // 位置

          var fadeAndDrop=duration(randomFloat(5, 11));

          var spinDuration=duration(randomFloat(4, 8));

          childDiv.style.webkitAnimationDuration=fadeAndDrop + ', ' + fadeAndDrop;


          var nodeDelay=duration(randomFloat(0, 5));

          childDiv.style.webkitAnimationDelay=nodeDelay + ', ' + nodeDelay;

          imgs.style.webkitAnimationDuration=spinDuration;

          childDiv.appendChild(imgs);

          return childDiv;

          }

          window.addEventListener('load', initData);

          【感恩平臺(tái)】

          果圖來一張,跨年兩個(gè)字這樣子扣的:我發(fā)現(xiàn)在PS里面用通道扣一些高對(duì)比度的圖片真的很爽

          后面是雪花效果,前面兩張圖片,加一個(gè)倒計(jì)時(shí)

          沒有廢話的時(shí)間了,直接上干貨吧:

          1, HTML的話,先得有一個(gè)`index.html`這樣子的網(wǎng)頁(yè)吧,新建一個(gè)文本文件,重命名成`index.html`就好了。然后寫進(jìn)去最最簡(jiǎn)單的HTML5的結(jié)構(gòu):

          <!DOCTYPE html>
          <html lang="zh" >
          <head>
          <meta charset="UTF-8">
          <title>祝大家2019年一切順利</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          </head>
          <body>
          </body>
          </html>
          

          如果官網(wǎng)用記事本來寫這個(gè)網(wǎng)頁(yè)的話,得存成utf-8編碼的:

          另存為,在編碼里面選擇utf-8

          還是建議換一個(gè)好用一點(diǎn)的文本編輯器,我用的ee(EverEdit),還推薦使用Gvim、sublime這些。記事本的話,有點(diǎn)太簡(jiǎn)單了。

          2, 在`</head>`前面一行加入css的引用:

          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="css/style.css">
          </head>
          

          相應(yīng)地,還需要在當(dāng)前目錄下面新建一個(gè)叫做`css`的文件夾,再在里面新建一個(gè)文本文件,并重命名為`style.css`,

          3, 在`</body>`的前面一行加入一個(gè)繪圖標(biāo)簽`<canvas>`:

          <canvas></canvas>
          </body>
          

          `<canvas>`標(biāo)簽算得上HTML5最有廣闊創(chuàng)造空間的標(biāo)簽之一了,可以通過js在`<canvas>`里面實(shí)現(xiàn)各種很不可思議的效果。

          4, 還是在`</body>`的前面,加入javascript的引用:

          <canvas></canvas>
          <script src="js/index.js"></script>
          </body>
          

          同樣的方法,在當(dāng)前文件夾下面新建`js`文件夾,再新建`index.js`文件。

          5, 往`index.js`里面加入實(shí)現(xiàn)雪花效果的代碼庫(kù),在這里先只是貼出來,具體js實(shí)現(xiàn)講解,請(qǐng)聽下回分解。

          ;!( function( w, d ) {
           'use strict';
           var Snow=function( x, y, r, sx, sy, o ) {
           this.x=x;
           this.y=y;
           this.r=r;
           this.sx=sx;
           this.sy=sy;
           this.o=o;
           this.draw=function() {
           ctx.beginPath();
           ctx.arc( this.x, this.y, this.r, 0, 2 * Math.PI );
           ctx.fillStyle='rgba( 255, 255, 255, ' + this.o + ' )';
           ctx.fill();
           }
           this.update=function() {
           if ( this.x + this.r > cw )
           this.x=0;
           if ( this.y + this.r > ch )
           this.y=0;
           if ( my && this.y + conf.sense >=my && this.y <=my + conf.sense )
           this.x +=this.sx;
           if ( mx && this.x + conf.sense >=mx && this.x <=mx + conf.sense )
           this.y +=this.sy;
           this.x +=this.sx;
           this.y +=this.sy;
           }
           },
           anim=t=> {
           let l=len;
           ctx.clearRect( 0, 0, cw, ch );
           while ( l-- ) {
           items[ l ].draw();
           items[ l ].update();
           }
           animID=requestAnimationFrame( anim );
           },
           init=()=> {
           items=[];
          			len=cw > 1000 ? 2000 : cw < 500 ? 500 : 1000;
           for ( let i=0; i < len; i++ ) {
           let r=Math.round( ( Math.random() * ( conf.maxR - conf.minR ) ) + conf.minR ),
           x=Math.round( ( Math.random() * ( cw + r ) ) - ( r * 2 ) ),
           y=Math.round( ( Math.random() * ( ch + r ) ) - ( r * 2 ) ),
           o=( Math.random() * ( conf.maxO - conf.minO ) + conf.minO ).toFixed( 2 ),
           sx=Math.ceil( ( Math.random() * ( conf.maxS - conf.minS ) ) + conf.minS ),
           sy=Math.ceil( ( Math.random() * ( conf.maxS - conf.minS ) ) + conf.minS );
           items.push( new Snow( x, y, r, sx, sy, o ) );
           }
           animID=requestAnimationFrame( anim );
           },
           c=d.querySelector( 'canvas' ),
           ctx=c.getContext( '2d' ),
           conf={
           maxR: 5,
           minR: 1,
           maxS: 2,
           minS: 0.3,
           maxO: 1,
           minO: .3,
           sense: 70
           },
           animID,
           timeoutID,
           mx=false,
           my=false,
           cw=innerWidth,
           ch=innerHeight,
           items=[],
           len=cw > 1000 ? 2000 : cw < 500 ? 500 : 1000;
           c.width=cw;
           c.height=ch;
           w.onresize=e=> {
           if ( timeoutID )
           clearTimeout( timeoutID );
           timeoutID=setTimeout( ()=> {
           cw=innerWidth;
           	ch=innerHeight;
           c.width=cw;
           c.height=ch;
           if ( animID )
           cancelAnimationFrame( animID );
           init();
           }, 250 );
           };
           init();
           w.onmousemove=e=> {
           mx=e.x;
           my=e.y;
           }
           w.onmouseout=e=> {
           mx=false;
           my=false;
           }
          })( this, document );
          

          同樣地保存成為utf-8編碼格式,現(xiàn)在先把javascript這塊放到一邊。

          5, 現(xiàn)在已經(jīng)實(shí)現(xiàn)了雪花效果了,因?yàn)榫W(wǎng)頁(yè)的背景默認(rèn)是白的,而雪花也是白的,所以看不見雪花。 編輯`css/style.css`文件,修改網(wǎng)頁(yè)的背景為黑色:

          html, body {
           margin: 0;
           background: black;
          }
          

          好了,現(xiàn)在看到的網(wǎng)頁(yè)效果應(yīng)該是這個(gè)樣子的:

          雪花效果已經(jīng)實(shí)現(xiàn)

          接下來,將兩張圖片進(jìn)行布局,再加入倒計(jì)時(shí),就完美啦。因?yàn)闀r(shí)間原因,今天就先到這里,后面的效果明天繼續(xù)。

          (未完待續(xù))


          主站蜘蛛池模板: 韩国精品福利一区二区三区| 国产凸凹视频一区二区| 国产一区二区三区精品久久呦| 无码人妻精品一区二区三区在线 | 久久久91精品国产一区二区| 亚洲一区爱区精品无码| 美女视频黄a视频全免费网站一区| 无码欧精品亚洲日韩一区| 亚洲日本中文字幕一区二区三区| 最新中文字幕一区二区乱码| 亚洲AV无码第一区二区三区| 国产一区二区三区在线电影| 国产一区二区在线| 久久久久久人妻一区二区三区| 亚洲一区二区在线免费观看| 无码视频一区二区三区在线观看| 亚洲综合色自拍一区| 国产一区二区三区免费| 亚洲视频在线一区二区三区| 日韩AV无码久久一区二区| 国产乱码精品一区二区三区中| 亚洲国产精品一区| 精品少妇人妻AV一区二区| 国产在线精品观看一区| 国产91一区二区在线播放不卡 | 中文字幕精品一区二区日本| 美女视频一区二区三区| 亚洲国产精品一区第二页| 一区二区不卡视频在线观看| 国产AV一区二区三区无码野战| 国产99视频精品一区| 亚洲变态另类一区二区三区| 日韩AV无码久久一区二区| 成人丝袜激情一区二区| 精品一区二区AV天堂| 国产精品一区在线观看你懂的| 精品无码国产一区二区三区AV| 久99精品视频在线观看婷亚洲片国产一区一级在线 | 一区二区3区免费视频| 蜜桃无码一区二区三区| 国产亚洲一区二区精品|