Question

我对这些按钮动画代码感到困惑。这些代码会产生一个脉动的效果按钮，但是我很难解释它们是如何协同工作的或在引擎盖下的功能。

<div >   
    <a href="#" class="btn btn--white btn--animated">btn</a>
</div>

style.css：

    .btn:link,    
    .btn:visited {    
      position: relative;
      border-radius: 10rem;
      display: inline-block;
      margin-top: 6rem;
      text-transform: uppercase;
      text-decoration: none;
      padding: 1.5rem 4rem;
      transition: all 1.2s;

    }

    .btn:hover {
      transform: translateY(-.3rem);
      box-shadow: 0 1rem 2rem  rgba(0, 0, 0, .3);
    }


    .btn:active {
      transform: translateY(-.1rem);
      box-shadow: 0 .5rem 1rem  rgba(0, 0, 0, .2);
    }


    .btn--white {

      background-color: #fff;
      color: #777;
    }


    .btn--white::after {    
      background-color: #fff;
    }


    .btn::after {    
      content: "";
      display: inline-block;
      height: 100%;
      width: 100%;
      border-radius: 10rem;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: all .2s;    
    }


    .btn:hover::after {    
      transform: scaleX(1.4) scaleY(1.6);
      opacity: 0;


    }

我的主要困惑是：

-在使用.btn::after的情况下，如何使用普通英语阅读:::之前/之后？我可以读为：运行.btn代码后，在这里运行这些代码吗？或使用.btn--white::after { background-color: #fff;}可以读取：执行.btn--白色后，将背景涂成白色吗？

-使用.btn::after，我们在原始链接按钮后面创建了一个空的btn框，当我们使用.btn:hover::after时，鼠标指针不是应该悬停在原始按钮链接上，而是悬停在原始按钮上是因为Z-index？

-此处如何产生脉动效果？ .btn--white::after如何被要求不断重新绘制空按钮？

具有伪元素的CSS脉动按钮效果

0 个答案: