SOURCE

console 命令行工具 X clear

                    
>
console
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>点击页面全屏扩展过渡效果</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta name="renderer" content="webkit">
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      body {
        font-size: 14px;
        font-family: -apple-system, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Arial, sans-serif;
        color: #27282b;
        background: #eee;
      }
      a {
        text-decoration: none;
        color: #27282b;
      }
      *,
      *::before,
      *::after {
        outline: none;
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
      }
      
      .wrapper {
        width: 100%;
        height: 100%;
        background: #eee;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
      }
      .tran-box {
        width: 100px;
        height: 100px;
        border-radius: 55%;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }
      
      .tran-box.anim {
        animation: anim1 .5s linear backwards;
      }
      
      @keyframes anim1 {
        10% {
          opacity: 1;
        }
        100% {
          opacity: 1;
          transform: scale(40, 40);
        }
      }
    </style>
  </head>

  <body>
    <div class="wrapper" id="app" :style="{'background-color': cacheBgColor}">
      <div class="tran-box" :class="{anim: isAnim}" :style="tStyle"></div>
    </div>

    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
    <script>
      const R = {
        randColor() {
          return '#' + ('00000' + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6)
        },
        timeout(ms) {
          return new Promise(resolve => setTimeout(resolve, ms))
        }
      }
      const vm = new Vue({
        el: '#app',
        data() {
          return {
            aList: [],
            initX: 0,
            initY: 0,
            isAnim: false,
            timer1s: 0,
            curBgColor: '#31a0eb',
            cacheBgColor: R.randColor(),
          }
        },
        computed: {
          tStyle() {
            return {
              'background-color': this.curBgColor,
              'top': this.initY - 50 + 'px',
              'left': this.initX - 50 + 'px'
            }
          },
        },
        
        mounted() {
          window.addEventListener('click', (e) => {
            clearTimeout(this.timer1s)
            this.timer1s = setTimeout(async () => {
              this.initX = e.clientX
              this.initY = e.clientY
              this.curBgColor = R.randColor()
              this.isAnim = true
              
              await R.timeout(450)
              this.cacheBgColor = this.curBgColor
              this.isAnim = false
            }, 30)
          })
        },
      })
    </script>
  </body>
</html>