前端每日挑战の会动的emoji~tooltip 提示框

本文链接：https://blog.youkuaiyun.com/weixin_41223912/article/details/83272106

本文分享了一个使用纯HTML和CSS创建的动态emoji表情及tooltip提示框的教程。通过巧妙利用CSS属性，如box-sizing、border-radius和伪元素，实现了表情的眼睛、嘴巴等特征，并结合JavaScript增强交互性。同时，通过CSS动画和过渡效果，让tooltip提示框在鼠标悬停时平滑显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端每日挑战の会动的emoji~tooltip 提示框

内容摘要

伤心啊，写了好几天博客没人看~不过没关系，写博客的主要目的还是为了技术积累。在segmentFault上看到有前端每日专栏，觉得不错，正好css基础还不够巩固决定跟着该专栏每天跟着学习一些有趣的纯html+css制作的效果，动画出处：https://segmentfault.com/a/1190000016651727

最终效果预览：https://codepen.io/comehope/pen/rqyoYY
在这里插入图片描述

内容学习

这次的内容比较多，但其实都是些能看懂比较简单的东西，要能运用自如还是要多练。比如像classList.toggle（）本人用的就比较少，一开始不是很理解是干嘛的，但看到实际效果就能发现classList的toggle属性和add属性比有很大的不同，toggle只是单纯的切换class类，不会再增加多新的类了。js部分用了es6的语法，因为本人在学习vue框架，也用到了一定的基础语法，理解起来不难。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提示窗</title>
    <style>
        body{
            margin: 0;
            height:100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: lightyellow;
        }
        .container{
            position: relative;
            width: 20em;
            height: 20em;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .emoji{
            position: relative;
            /*更换为ie盒子模型*/
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            width: 10em;
            height: 10em;
            background-color: pink;
            border-radius: 50% 50% 75% 50%;
        }
        .emoji .eye{
            position: absolute;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            width: 3em;
            height: 3em;
            border: 0.1em solid gray;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            top: 3em;
        }
        .emoji .eye.left{
            left: 1em;
        }
        .emoji .eye.right{
            right: 1em;
        }
        /*画出眼珠*/
        .emoji .eye.left::before,
        .emoji .eye.right::before{
            content: "";
            position: absolute;
            width: 1em;
            height: 1em;
            background-color: #222;
            border-radius: 50%;
            top:1em;
            left: calc((100% - 1em) / 2);
        }
        /*画嘴巴*/
        .emoji .mouth{
            position: absolute;
            width: 2em;
            height: 2em;
            border: 0.1em solid;
            bottom: 1em;
            left: 40%;
            border-radius: 50%;
            border-color: transparent gray gray transparent;
            transform: rotate(20deg);
        }
        .emoji .eye{
            --top: 1em;
            --left: calc((100% - 1em) / 2) ;
        }

        .emoji .eye.left::before,.emoji .eye.right::before{
            top: var(--top);
            left:var(--left);
        }
        .emoji.top .eye{
            --top: 0;
        }
        .emoji.bottom .eye{
            --top: 1.8em;
        }
        .emoji.left .eye{
            --left:0;
        }
        .emoji.right .eye{
            --left: 1.8em;
        }
        .tip{
            position: absolute;
            cursor: pointer;
            font-size: 4.5em;
            color: silver;
            font-family: sans-serif;
            font-weight: 100;
        }
        .tip.top{
            top:-15%
        }
        .tip.bottom{
            bottom: -15%;
        }
        .tip.right{
            right: -15%;
        }
        .tip.left{
            left: -15%;
        }
        /*设置平滑动画*/
        .emoji .eye.left::before,
        .emoji .eye.right::before {
            transition: 0.3s ease;
        }
        /*用伪元素装下data-tip信息*/
        .tip::before{
            /*获取属性的值为内容*/
            content: attr(data-tip);
            position: absolute;
            font-size: 0.3em;
            font-family: sans-serif;
            width: 10em;
            text-align: center;
            background-color: #222222;
            color: white;
            padding: 0.5em;
            border-radius: 0.2em;
            box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.3);
        }
        .tip.top::before{
            top: 0;
            left: 50%;
            transform: translate(-50%,calc(-100% - 0.6em));
        }
        .tip.bottom::before {
            bottom: 0;
            left: 50%;
            transform: translate(-50%, calc(100% + 0.6em));
        }

        .tip.left::before {
            left: 0;
            top: 50%;
            transform: translate(calc(-100% - 0.6em), -50%);
        }

        .tip.right::before {
            right: 0;
            top: 50%;
            transform: translate(calc(100% + 0.6em), -50%);
        }
        .tip::after{
            content: "";
            position: absolute;
            font-size: 0.3em;
            width: 0;
            height: 0;
            color: #222;
            border: 0.6em solid transparent;
        }
        .tip.top::after{
            border-bottom-width: 0;
            border-top-color: currentColor ;
            top: -0.6em;
            left: 50%;
            -webkit-transform: translate(-50%, 0);
            -moz-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
            -o-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
        }
        .tip.bottom::after {
            border-top-width: 0;
            border-bottom-color: currentColor;
            bottom: -0.6em;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .tip.left::after {
            border-right-width: 0;
            border-left-color: currentColor;
            left: -0.6em;
            top: 50%;
            transform: translate(0, -50%);
        }

        .tip.right::after {
            border-left-width: 0;
            border-right-color: currentColor;
            right: -0.6em;
            top: 50%;
            transform: translate(0, -50%);
        }
        /*设置是否可见*/
        .tip::before,.tip::after{
            visibility: hidden;
            filter: opacity(0);
            -webkit-transition: 0.3s;
            -moz-transition: 0.3s ;
            -ms-transition: 0.3s ;
            -o-transition: 0.3s ;
            transition: 0.3s ;
        }
        .tip:hover::before,
        .tip:hover::after{
            visibility: visible;
            filter:opacity(1);
        }
    </style>
</head>
<body>
    <section class="container">
        <div class="emoji">
            <span class="eye left"></span>
            <span class="eye right"></span>
            <span class="mouth"></span>
        </div>
        <span class="tip top" data-tip="look up">@</span>
        <span class="tip left" data-tip="look down">@</span>
        <span class="tip right" data-tip="look to the left">@</span>
        <span class="tip bottom" data-tip="look to the right">@</span>
    </section>
</body>
<script>
    const Directions = ['top','bottom','left','right'];
    const EVENTS = ['mouseover','mouseout'];
    const $ = (className)=>document.getElementsByClassName(className)[0];
    Directions.forEach(dtn =>
        EVENTS.forEach((e) =>
           $('tip '+dtn).addEventListener(e,() =>
           //    切换类名,这样不会导致类名无限添加
           $('emoji').classList.toggle(dtn)
           )
        )
    )
</script>
</html>