html - 将圆圈过渡应用于 Font Awesome 图标

Question

我这里有 fiddle :https://jsfiddle.net/8f3vLh0a/14/

我使用字体很棒的图标，我想在悬停时应用圆圈效果就像这里的演示:http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/

如何在 JSFIDDLE 上的演示中应用这种环绕效果？这是我的 HTML:

    <div class="container">

          <ul class="icon-menu">
                <li class="icon-box home"> <i class="fa fa-home fa-4x"></i>
        <a href="#">
                      <span class="icon home "></span>
                      <h2>Home</h2>
                    </a>
                </li>   


                <li class="icon-box aboutme"> 
        <i class="fa fa-home fa-4x"></i>
                    <a href="#">
            <span class="icon aboutme"></span>
                      <h2>About Me</h2>
                    </a>
                </li>


                <li class="icon-box portfolio"> 
        <i class="fa fa-home fa-4x"></i>
                     <a href="#">
                        <span class="icon portfolio"></span>
                         <h2>Portfolio</h2>
                     </a>
                </li>


                <li class="icon-box blog"> 
          <i class="fa fa-home fa-4x"></i>
                     <a href="#">
                         <span class="icon blog"></span>
                          <h2>Blog</h2>
                     </a>
                </li>


                <li class="icon-box contact"> \
          <i class="fa fa-home fa-4x"></i>
                     <a href="#">
                        <span class="icon contact"></span>
                        <h2>Contact</h2>
                       </a>
                </li>

          </ul>

 </div>

 </div>

Answer 1

这是您更新的 fiddle :https://jsfiddle.net/8f3vLh0a/17/

负责“循环效应”的部分是这个

.icon-menu i {
    border-radius: 50%;
    box-shadow: 0 0 0 50px transparent;
    padding: 0.2em 0.25em;
    background: rgba(255,255,255,0.1);
    transform: translate3d(0, 0, 0);
    transition: box-shadow .6s ease-in-out;
}

.icon-menu li:hover i,
.icon-menu li:active i,
.icon-menu li:focus i {     
    box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
    transition: box-shadow .4s ease-in-out;
}

基本上它所做的是，默认情况下 box-shadow 是 hidden (阴影不会改变元素的坐标，如边框、边距等) 并且通过悬停，您可以过渡缓入缓出，使其可见/隐藏。
图标后面的圆圈可以调整为合适的圆圈(使用填充)。
最后需要更改的是图标的坐标，因此我在 .fa 类中使用了 20px 而不是 30px