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

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

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

1. 櫻花飄落特效：

HTML：

```html

</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>

```

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

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ù)）

在線咨詢

上一篇：JavaScript實(shí)戰(zhàn)002：前端各種文件下載功能
下一篇：PS軟件怎么切圖，PS怎么導(dǎo)出html格式文件

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

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

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

您的項(xiàng)目需求

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