js实现雷阵雨效果
代码语言:html
所属分类:动画
代码描述:js实现雷阵雨效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Contrail+One'> <style> * { margin: 0; padding: 0; } html,body { overflow: hidden; } canvas { background-color: #1f1f33; -webkit-animation: thunder-bg 8s infinite; } h1 { position: fixed; font-size: 3em; text-align: center; top: 50%; left: 50%; color: #565656; transform: translate(-50%, -50%); text-shadow: 5px 5px 0px rgba(0,0,0,0); font-family:'Contrail one', serif; -webkit-animation: thunder-h1 8s infinite; } @-webkit-keyframes thunder-bg { 0% { background-color: #1f1f33; } 9% { background-color: #1f1f33; } 10% { background-color: #484877; } 10.5% { background-color: #1f1f33; } 80% { background-color: #1f1f33; } 82% { background-color: #484877; } 83% { background-color: #1f1f33; } 83.5% { background-color: #484877; } 100% { background-color: #1f1f33; } } @-webkit-keyframes thunder-h1 { 0% { color: #565656; text-shadow: 2px 2px 0px rgba(0,0,0,0.4); } 9% { color: #565656; text-shadow: 2px 2px 0px rgba(0,0,0,0.4); } 10% { color: #ffffff; text-shadow: 5px 5px 0px rgba(0,0,0,0.5); } 10.5% { color: #565656; text-shadow: 2px 2px 0px rgba(0,0,0,0.4); } 80% { color: #565656; text-shadow: 2px 2px 0px rgba(0,0,0,0.4); } 82% { color: #ffffff; text-shadow: 5px 5px 0px rgba(0,0,0,0.5); } 83% { color: #565656; text-shadow: 2px 2px 0px rgba(0,0,0,0.4); } 83.5% { color: #ffffff; text-shadow: 5px 5px 0px rgba(0,0,0,0.5); } 100% { color: #565656; text-shadow: 2px 2px 0px rgba(0,0,0,0.4); } } </style> </head> <body translate="no"> <canvas id="canvas"></canvas> <h1> <span id="thunder">Thunder</span> and <span id="rain">Rain</span> </h1> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var cw = window.innerWidth; var ch = window.innerHeight; ctx.canvas.width = cw; ctx.canvas.height = ch; var rainSpeed = 25; var rainWeight = 1; // 1 being heaviest var raindrops =.........完整代码请登录后点击上方下载按钮下载查看
网友评论0