js拖动滚动条模仿日出东方效果代码
代码语言:html
所属分类:动画
代码描述:js拖动滚动条模仿日出东方效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head> <meta charset="UTF-8"> <style> html { background-color: #000700; color: #fff; font-family: sans-serif; display: flex; min-height: 100%; } body { min-width: 100%; min-height: 100%; margin: 0; } canvas.sunrise { box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.35); } .container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 800px; height: 800px; display: flex; flex-direction: column; justify-content: center; } input[type="range"]::-moz-range-track { background-color: blue; } canvas.backdrop { position: absolute; width: 100vw; height: 100vh; filter: blur(100px); opacity: 0.5; } </style> </head> <body > <canvas width="800" height="600" class="backdrop"></canvas> <div class="container"> <canvas class="sunrise" width="800" height="600"></canvas> <input type="range" min="0" max="9500" step="1" id="range" value="0"> &l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0