js+css实现液态瀑布流冲刷按钮悬浮动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现液态瀑布流冲刷按钮悬浮动画效果代码
代码标签: js css 液态 瀑布流 冲刷 按钮 悬浮 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } .container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } nav { width: 200px; height: 245px; z-index: 50; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } button { width: 100%; height: 50px; transition: .3s; position: relative; color: white; margin-bottom: 5px; font-size: 14px; background-color: black; border: none; outline: none; background: black; } button::before { content: ''; outline: none; border: none; width: 100%; height: 50px; line-height: 50px; position: absolute; top: 0; left: 0; transition: .3s; background: rgba(0,0,0,1); } button:nth-child(1)::before { content: 'HOME'; } button:nth-child(2)::before { content: 'PROJECTS'; } button:nth-child(3)::before { content: 'CONTACT'; } button:nth-child(4)::before { content: 'ABOUT'; } button:nth-child(5)::before { content: 'HIRE ME'; } button:hover::before { transform: translateX(-50px); } .mainBlock { width: 100%; min-width: 500px; height: 270px; margin-left: 347px; top: 0; border: 3px solid black; position: absolute; padding: 38px 60px; background: black; color: white; font-size: 14px; opacity: 0; } .mainBlock > div > p:nth-child(2) { text-align: right; margin-top: 40px; } .topBlock { width: 80%; height: 70px; left: 60px; top: -70px; position: absolute; border: 2px solid black; color: black; opacity: 0; } .topBlock > div { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0; font-size: 16px; text-align: center; opacity: 0; } .bottomBlock { width: 80%; height: 140px; left: 70px; bottom: -141px; position: absolute; border: 2px solid black; background: white; text-align: center; color: black; padding: 30px; } .bottomBlock > div { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0; font-size: 16px; } #canvas1 { position: absolute; top: 0; left: 0; filter: url("#goo"); opacity: 1; } svg { display: none; } footer { font-family: monospace; width: 95%; color: black; font-size: 15px; margin-left: 5px; text-shadow: 1px 1px 1px #737373; position: absolute; bottom: 0; text-align: center; } </style> </head> <body> <!-- partial:index.partial.html --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> </svg> <canvas id="canvas1"></canvas> <div class="container"> <nav> <button></button> <button></button> <button></button> <button></button> <button></button> </nav> </div> <!-- partial --> <script > const canvas = document.getElementById('canvas1'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const mouse = { x: undefined, y: undefined } let shade = 0; let randomColour = 'hsl(' + shade + ', 99%, 35%)'; const timer = setInterval(function(){ shade++; randomColour = 'hsl(' + shade + ', 99%, 35%)'; }, 200); window.addEventListener('mousemove', function(e){ mouse.x = e.clientX; mouse.y = e.clientY; }); class Button { constructor(x, y, width, height, baseX){ this.x = x; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0