文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

elastic

发布于 2023-08-19 19:14:40 字数 1576 浏览 0 评论 0 收藏 0

elastic

<style>
    /**
     * Elastic transitions
     */

    input:not(:focus) + .callout:not(:hover) {
        transform: scale(0);
        transition: .25s transform; /* .25s:fix close delay ; transform: specify transition property */
    }

    .callout {
        transition: .5s cubic-bezier(.25,.1,.3,1.5) transform;
        transform-origin: 1.4em -.4em;
    }

    /* Styling */
    body {
        padding: 1.5em;
        font: 200%/1.6 Baskerville;
    }

    input {
        display: block;
        padding: 0 .4em;
        font: inherit;
    }

    .callout {
        position: absolute;
        max-width: 14em;
        padding: .6em .8em;
        border-radius: .3em;
        margin: .3em 0 0 -.2em;
        background: #fed;
        border: 1px solid rgba(0,0,0,.3);
        box-shadow: .05em .2em .6em rgba(0,0,0,.2);
        font-size: 75%;
    }

    .callout::before {
        content: "";
        position: absolute;
        top: -.4em;
        left: 1em;
        padding: .35em;
        background: inherit;
        border: inherit;
        border-right: 0;
        border-bottom: 0;
        transform: rotate(45deg);
    }
</style>
<body>
<label>
    Your username: <input id="username" value="wdpm"/>
    <span class="callout">Only letters, numbers,underscores (_) and hyphens (-) allowed!</span>
</label>
</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

elastic

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。