11.一起来抄一个小小的提示菜单

效果图

DOM

<label>
    Your Name:<input id="username"/>
    <span class="callout">请不要输入特殊字符串</span>
</label>

css

            label{
                position: relative;
                width: min-content;
            }
            input{
                display: block;
            }
            input:not(:focus)+.callout{
                transform: scale(0);
                transition: .25s;
            }
            .callout{
                transition: .5s cubic-bezier(.25,.1,.3,1.5);
                transform-origin: 1.4em -.4em;
            }
            .callout{
                position: absolute;
                top: 100%;
                left: 0;
                width: 200px;
                height: auto;
                padding: 0.5em;
                margin-top: 0.8em;
                background: #5588AA;
                color: white;
                border-radius: 4px;
                filter: drop-shadow(0px 3px 5px rgba(0,0,0,.32));
            }
            .callout::before{
                content: '';
                height: 0;
                width: 0;
                position: absolute;
                top: -20px;left: 20px;
                
                border: 10px solid #5588AA;
                border-color: transparent transparent #5588AA transparent;
            }
            input:focus + .callout { animation: elastic-grow .5s; }
            @keyframes elastic-grow{
                from{transform: scale(0);}
                70% {
                     transform: scale(1.1);
                     animation-timing-function:
                     cubic-bezier(.1,.25,1,.25); /* 反向的ease */
                 }
            }        

 

转载于:https://www.cnblogs.com/famLiu/p/7205799.html