美文网首页
视觉表现

视觉表现

作者: lmmy123 | 来源:发表于2019-04-12 10:05 被阅读0次

    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}
    

    相关文章

      网友评论

          本文标题:视觉表现

          本文链接:https://www.haomeiwen.com/subject/cjrfwqtx.html