css+div实现发光图标菜单悬浮缩放动画效果代码-html代码-BFW代码库

css+div实现发光图标菜单悬浮缩放动画效果代码

代码语言：html

代码描述：css+div实现发光图标菜单悬浮缩放动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  



  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'>
  
<style>
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
:root {
   --bg: #222;
   --clr: #fff;
}
body {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background: var(--bg);
}
ul {
   position: relative;
   display: flex;
   gap: 50px;
}
ul li {
   position: relative;
   list-style: none;
   width: 80px;
   height: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   transition: 0.5s;
}
ul li::before {
   content: '';
   position: absolute;
   inset: 30px;
   box-shadow: 0 0 0 10px var(--clr),
               0 0 0 20px var(--bg),
               0 0 0 22px var(--clr);
   transition: 0.5s;
}
ul li:hover::before {
   inset: 15px;
}
ul li::after {
   content: '';
   position: absolute;
   inset: 0;
   background: var(--bg);
   transform: rotate(45deg);
   transition: 0.5s;
}
ul li:hover::after {
   inset: 0px;
   transform: rotate(0deg);
}
ul li a {
   position: relative;
   text-decoration: none;
   z-index: 10;
   display: flex;
   justify-content: center;
   align-items: center;
}
ul li a i {
   font-size: 2em;
   transition: 0.5s;
   color: var(--clr);
   opacity: 1;
}
ul li:hover a i {
   color: var(--clr);
   transform: translateY(-40%).........完整代码请登录后点击上方下载按钮下载查看