CSS3动画-圆形菜单按钮悬停光晕

仿站青年帮效果

css3, wave, button

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2624
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
       background: rgb(0, 171, 217)
   }
   a {
       text-decoration: none;
   }
   section .serv {
       text-align: center;
       margin-top: 160px;
       height: 180px;
   }
   section .serv li {
       display: inline-block;
       margin: 0 20px;
       vertical-align: top;
       position: relative;
       width: 138px;
       height: 138px;
   }
   section .serv li a {
       display: block;
       width: 138px;
       background: url(/uploads/user_upload/36477/fuwu_quan_img.png);
       text-align: center;
       line-height: 138px;
       border-radius: 50%;
       font-size: 20px;
       color: #124655;
       position: absolute;
       top: 0;
       left: 0;
       z-index: 999
   }
   section .serv li img {
       position: absolute;
       top: 0;
       left: 0;
       z-index: 990;
   }
   /*section .serv li a:hover{ width:180px; line-height:180px; font-size:40px; background:#124655; color:#fff; margin-top:-30px;}*/
   
   section .serv li a:hover+img {
       -webkit-animation: quan 2s linear infinite;
       animation: quan 2s linear infinite;
   }
   @-webkit-keyframes quan {
       from {
           -webkit-transform: scale(1);
           transform: scale(1);
           opacity: 1;
       }
       to {
           -webkit-transform: scale(1.2);
           transform: scale(1.2);
           opacity: 0.1;
       }
   }
   @keyframes quan {
       from {
           -webkit-transform: scale(1);
           transform: scale(1);
           opacity: 1;
       }
       to {
           -webkit-transform: scale(1.3);
           transform: scale(1.3);
           opacity: 0.1;
       }
   }

HTML

仿站青年帮效果

css3, wave, button

编辑器支持Emmet

快捷键

仿站青年帮效果

css3, wave, button

5个实用新颖的CSS3菜单按钮悬停动画

使用CSS3 box-shadow实现的7个按钮悬停动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：