animejs实现悬浮窝峰动画效果
代码语言:html
所属分类:悬停
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background: #000; min-height: 100vh; } .container{ position: relative; overflow: hidden; height: 100vh; animation: animate 4s linear infinite; } @keyframes animate{ 0%{ filter: hue-rotate(0deg); } 100%{ filter: hue-rotate(360deg); } } .row{ display: inline-flex; margin-left: -50px; margin-top: -32px; overflow: hidden; } .row:nth-child(even){ margin-left: 1px; } .hexagon{ position: relative; height: 110px; width: 100px; background: #111; margin: 1px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); transition: 2s; } .hexagon:before{ content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; pointer-events: none; background: rgba(255, 255, 255, 0.02); } .hexagon:hover{ transition: 0s; background: #0f0; cursor: alias; } </style> </head> <body translate="no"> <a > <div class="container"> <div class="row"> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> </div> <div class="row altline2"> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> </div> <div class="row line2"> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> </div> <div class="row altline3"> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> </div> <div class="row line3"> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> </div> <div class="row altline4"> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> </div> <div class="row line4"> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon">&l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0