jquery实现多种下雨动画效果代码
代码语言:html
所属分类:动画
代码描述:jquery实现多种下雨动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html { height:100% } body { height:100%; margin:0; overflow:hidden; background:linear-gradient(to bottom,#202020,#111119) } .rain { position:absolute; left:0; width:100%; height:100%; z-index:2 } .rain.back-row { display:none; z-index:1; bottom:60px; opacity:.5 } body.back-row-toggle .rain.back-row { display:block } .drop { position:absolute; bottom:100%; width:15px; height:120px; pointer-events:none; animation:drop .5s linear infinite } @keyframes drop { 0% { transform:translateY(0vh) } 75% { transform:translateY(90vh) } 100% { transform:translateY(90vh) } }.stem { width:1px; height:60%; margin-left:7px; background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0.25)); animation:stem .5s linear infinite } @keyframes stem { 0% { opacity:1 } 65% { opacity:1 } 75% { opacity:0 } 100% { opacity:0 } }.splat { width:15px; height:10px; border-top:2px dotted rgba(255,255,255,0.5); border-radius:50%; opacity:1; transform:scale(0); animation:splat .5s linear infinite; display:none } body.splat-toggle .splat { display:block } @keyframes splat { 0% { opacity:1; transform:scale(0) } 80% { opacity:1; transform:scale(0) } 90% { opacity:.5; transform:scale(1) } 100% { opacity:0; transform:scale(1.5) } }.toggles { position:absolute; top:0; left:0; z-index:3 } .toggle { position:absolute; left:20px; width:50px; height:50px; line-height:51px; box-sizing:border-box; text-align:center; font-family:sans-serif; font-size:10px; font-weight:bold; background-color:rgba(255,255,255,0.2); color:rgba(0,0,0,0.5); border-radius:50%; cursor:pointer; transition:background-color .3s } .toggle:hover { background-color:rgba(255,255,255,0.25) } .toggle:active { background-color:rgba(255,255,255,0.3) } .toggle.active { background-color:rgba(255,255,255,0.4) } .splat-toggle { top:20px } .back-row-toggle { top:90px; line-height:12px; padding-top:14px } .single-togg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0