整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Html、Css、Javascript 实现「樱花飘

Html、Css、Javascript 实现「樱花飘落」、「雪花飘落」特效

下是使用HTML、CSS和JavaScript实现"樱花飘落"和"雪花飘落"特效的简单示例:

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文件,并在相应的位置放置樱花或雪花图像,即可实现对应特效。注意,需要在CSS中调整图像和容器的样式以适应实际需求。这只是一个简单示例,您可以根据自己的喜好和需求进行定制和扩展。


人在空间展示时,用的到雪花飘动的效果,mark收藏一下,简单的几行代码就搞定,以后在做论坛和空间等需求时方便不时之需;下图是展示效果截图:

视频展示截图


1.视频播放展示效果 点击观看

2.实现源码:

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));

}

// 创建

function createNode(){

// 创建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));


// 创建动画

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);

【感恩平台】

果图来一张,跨年两个字这样子扣的:我发现在PS里面用通道扣一些高对比度的图片真的很爽

后面是雪花效果,前面两张图片,加一个倒计时

没有废话的时间了,直接上干货吧:

1, HTML的话,先得有一个`index.html`这样子的网页吧,新建一个文本文件,重命名成`index.html`就好了。然后写进去最最简单的HTML5的结构:

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

如果官网用记事本来写这个网页的话,得存成utf-8编码的:

另存为,在编码里面选择utf-8

还是建议换一个好用一点的文本编辑器,我用的ee(EverEdit),还推荐使用Gvim、sublime这些。记事本的话,有点太简单了。

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

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

相应地,还需要在当前目录下面新建一个叫做`css`的文件夹,再在里面新建一个文本文件,并重命名为`style.css`,

3, 在`</body>`的前面一行加入一个绘图标签`<canvas>`:

<canvas></canvas>
</body>

`<canvas>`标签算得上HTML5最有广阔创造空间的标签之一了,可以通过js在`<canvas>`里面实现各种很不可思议的效果。

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

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

同样的方法,在当前文件夹下面新建`js`文件夹,再新建`index.js`文件。

5, 往`index.js`里面加入实现雪花效果的代码库,在这里先只是贴出来,具体js实现讲解,请听下回分解。

;!( 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编码格式,现在先把javascript这块放到一边。

5, 现在已经实现了雪花效果了,因为网页的背景默认是白的,而雪花也是白的,所以看不见雪花。 编辑`css/style.css`文件,修改网页的背景为黑色:

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

好了,现在看到的网页效果应该是这个样子的:

雪花效果已经实现

接下来,将两张图片进行布局,再加入倒计时,就完美啦。因为时间原因,今天就先到这里,后面的效果明天继续。

(未完待续)