动画（一）

<template lang="html">
  <div flex="main:center cross:center" class="home-wrapper">
    <div class="wrap-input100">
      <input class="input100" type="text" name="email" placeholder="邮箱" />
      <div class="focus-input100"></div>
      <div class="symbol-input100" flex="cross:center">
        <i class="iconfont icon-youxiang"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
  watch: {},
  components: {}
};
</script>

<style lang="scss" scoped>
.home-wrapper {
  width: 100vw;
  height: calc(100vh - 60px);
  .wrap-input100 {
    position: relative;
    width: 300px;
    .input100 {
      font-size: 16px;
      color: #666666;
      display: block;
      width: 100%;
      background: #e6e6e6;
      height: 50px;
      border-radius: 25px;
      padding: 0 68px;
      box-sizing: border-box;
    }

    .focus-input100 {
      position: absolute;
      border-radius: 25px;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      z-index: -1;
      box-shadow: 0px 0px 0px 0px;
      color: rgba(87, 184, 70, 0.8);
    }
    .input100:focus + .focus-input100 {
      animation: anim-shadow 0.5s ease-in-out forwards;
    }
    @keyframes anim-shadow {
      to {
        box-shadow: 0px 0px 70px 25px;
        opacity: 0;
      }
    }

    .symbol-input100 {
      font-size: 16px;
      position: absolute;
      border-radius: 25px;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      padding-left: 35px;
      box-sizing: border-box;
      pointer-events: none;
      color: #666666;
      transition: all 0.4s;
    }
    .input100:focus + .focus-input100 + .symbol-input100 {
      color: #57b846;
      padding-left: 28px;
    }
  }
}
</style>

这段代码有很多说头！！！！

    .focus-input100 {
      position: absolute;
      border-radius: 25px;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      z-index: -1;
      box-shadow: 0px 0px 0px 0px;
      color: rgba(87, 184, 70, 0.8);
    }
    .input100:focus + .focus-input100 {
      animation: anim-shadow 0.5s ease-in-out forwards;
    }
    @keyframes anim-shadow {
      to {
        box-shadow: 0px 0px 70px 25px;
        opacity: 0;
      }
    }

也可以写成下面这种格式：

    .focus-input100 {
      position: absolute;
      border-radius: 25px;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      z-index: -1;
      box-shadow: 0px 0px 0px 0px rgba(87, 184, 70, 0.8);
      // color: rgba(87, 184, 70, 0.8);
    }
    .input100:focus + .focus-input100 {
      animation: anim-shadow 0.5s ease-in-out forwards;
    }
    @keyframes anim-shadow {
      to {
        // box-shadow: 0px 0px 70px 25px;
        box-shadow: 0px 0px 70px 25px rgba(87, 184, 70, 0.8);
        opacity: 0;
      }
    }

color，之于box-shadow感觉上就是将颜色属性提取出来了单独写，然后后面在设置动画的时候，只用去管尺寸，而不用去管颜色

    .symbol-input100 {
      font-size: 16px;
      position: absolute;
      border-radius: 25px;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      padding-left: 35px;
      box-sizing: border-box;
      pointer-events: none;
      color: #666666;
      transition: all 0.4s;
    }

pointer-events: none;这也是一个自己从没用过的属性，但是发现很好用
下面这段解释，应该能理解的很明白了。

pointer-events:none（默认为auto）的作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。
一切都是幻影!

单纯上面所有的代码，看出来的效果并不是很好的，还要去掉input的默认样式，写代码一直是用框架，这种最原始的技能一直没注意

input {
  outline: none;
  border: none;
}

textarea {
  outline: none;
  border: none;
}

textarea:focus,
input:focus {
  border-color: transparent !important;
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}
input:focus:-moz-placeholder {
  color: transparent;
}
input:focus::-moz-placeholder {
  color: transparent;
}
input:focus:-ms-input-placeholder {
  color: transparent;
}

textarea:focus::-webkit-input-placeholder {
  color: transparent;
}
textarea:focus:-moz-placeholder {
  color: transparent;
}
textarea:focus::-moz-placeholder {
  color: transparent;
}
textarea:focus:-ms-input-placeholder {
  color: transparent;
}

input::-webkit-input-placeholder {
  color: #999999;
}
input:-moz-placeholder {
  color: #999999;
}
input::-moz-placeholder {
  color: #999999;
}
input:-ms-input-placeholder {
  color: #999999;
}

textarea::-webkit-input-placeholder {
  color: #999999;
}
textarea:-moz-placeholder {
  color: #999999;
}
textarea::-moz-placeholder {
  color: #999999;
}
textarea:-ms-input-placeholder {
  color: #999999;
}