下是使用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; }
好了,现在看到的网页效果应该是这个样子的:
雪花效果已经实现
接下来,将两张图片进行布局,再加入倒计时,就完美啦。因为时间原因,今天就先到这里,后面的效果明天继续。
(未完待续)
*请认真填写需求信息,我们会在24小时内与您取得联系。