视觉表现

css绘制

background-blend-mode
filter

字符打点

的舒服<div class="dot2">...</div>

    .dot2{
            display: inline-block;
            height: 1em;
            line-height: 1;
            text-align: left;;
            vertical-align: -.25ex;
            overflow: hidden;
        }
        .dot2:before{
            display: block;
            content: '... \A.. \A.';
            white-space: pre-wrap;
            animation: dot3 1s infinite step-start both;
        }
        @keyframes dot3 {
            33% {transform: translateY(-2em);}
            66% {transform: translateY(-1em);}
        }

颜色流动

<div class="flow-color"></div>
<h1>滴水电费是的</h1>

    h1{
            font-size: 100px;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
            animation: hue 6s linear infinite;
        }

   .flow-color{
            height: 150px;
            background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
            animation: hue 6s linear infinite;
        }
        @keyframes hue {
            form {filter: hue-rotate(0deg);}
            to {filter: hue-rotate(360deg);}
        }

输入框禁用

        <form>
        <input type="text" name="" id='text'/>
    </form>
      #text{pointer-events: none}
      // 上面这种键盘tab 会输入
      // 下面这种不会
    <form>
        <fieldset disabled>
            <legend>标题</legend>
            <input type="" name="">
        </fieldset>
    </form>
      fieldset[disabled]  {pointer-events: none}