zoukankan      html  css  js  c++  java
  • css动画:按钮涟漪效果

    <template>
      <div id="app">
        <button class="btn btn-primary">按钮1 <span class="mask mask-1"></span></button>
        <button class="btn btn-secondary">按钮2 <span class="mask mask-2"></span></button>
        <button class="btn btn-warning">按钮3 <span class="mask mask-3"></span></button>
        <button class="btn btn-success">按钮4 <span class="mask mask-4"></span></button>
      </div>
    </template>
    <style lang="less" scoped>
    #app {
      button {
        outline: none;
        border: none;
        cursor: pointer;
      }
      .btn {
        position: relative;
        height: 40px;
        padding: 0 15px;
        color: #fff;
        font-size: 16px;
        border: 1px solid;
        border-radius: 3px;
        margin: 0 10px;
      }
      .btn-primary {
        background-color: #337ab7;
        border-color: #2e6da4;
      }
      .btn-secondary {
        background-color: #5bc0de;
        border-color: #46b8da;
      }
      .btn-warning {
        background-color: #f0ad4e;
        border-color: #eea236;
      }
      .btn-success {
        background-color: #5cb85c;
        border-color: #4cae4c;
      }
      .mask {
        position: absolute;
        height: 100%;
        background-color: #fff;
        opacity: 1;
      }
      .mask-1 {
        top: 0;
        right: 0;
      }
      .mask-2 {
        top: 0;
        left: 0;
        border-top-right-radius: 40px;
      }
      .mask-3 {
        left: 50%;
        top: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
      }
      .mask-4 {
        width: 100%;
        height: 0;
        left: 0;
        bottom: 0;
      }
      .btn-primary:hover .mask-1 {
        animation-name: btn-animation-one;
        animation-duration: 1s;
      }
      .btn-secondary:hover .mask-2 {
        animation-name: btn-animation-one;
        animation-duration: 1s;
      }
      .btn-warning:hover .mask-3 {
        animation-name: btn-animation-three;
        animation-duration: 1s;
      }
      .btn-success:hover .mask-4 {
        animation-name: btn-animation-four;
        animation-duration: 1s;
      }
      @keyframes btn-animation-one {
        from {
          width: 0;
          opacity: 1;
        }
        to {
          width: 100%;
          opacity: 0;
        }
      }
      @keyframes btn-animation-three {
        from {
          width: 1px;
          height: 1px;
          transform: scale(0);
          opacity: 1;
        }
        to {
          width: 1px;
          height: 1px;
          transform: scale(100);
          opacity: 0;
        }
      }
      @keyframes btn-animation-four {
        from {
          height: 0;
          opacity: 1;
        }
        to {
          height: 100%;
          opacity: 0;
        }
      }
    }
    </style>

  • 相关阅读:
    c++ primer 读书笔记
    如何利用c++编写不能被继承、但可以在类外定义对象的类
    为什么对多线程编程这么怕?pthread,sem,mutex,process
    死锁的理解
    动态规划--找零钱 coin change
    C++ STL中Map的按Key排序和按Value排序
    c++ STL sort struct comp
    《剑指offer》第二十五题(合并两个排序的链表)
    《剑指offer》第二十四题(反转链表)
    《剑指offer》第二十三题(链表中环的入口结点)
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15385882.html
Copyright © 2011-2022 走看看