Question

我在这里小提琴：https://jsfiddle.net/8f3vLh0a/14/

我使用字体真棒图标，我想在悬停中应用循环效果lke此演示：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

这是您更新的小提琴：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 （阴影不会改变元素的坐标，如边框，边距等）和徘徊，transition ease-in-out使其成为visible/hidden 图标后面的圆圈可以调整为适当的圆圈（用填充物来玩）最后需要更改的是图标的坐标，所以我在.fa类中使用了20px而不是30px

将圆形过渡应用于字体真棒图标

1 个答案: