CSS3 4个带方向箭头的标注框

最新推荐文章于 2025-02-14 14:27:05 发布

rockllee

最新推荐文章于 2025-02-14 14:27:05 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/rockllee/article/details/79621318

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用 CSS3 实现带有指向指示器的 callouts 动画效果，包括底部、顶部、左侧和右侧的指向箭头，并通过关键帧动画实现平滑过渡。

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

html:

<script src="http://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<div style="width:100%;overflow:hidden;background-color:#FFF;">
    <h1 class="title-style text--center">Css3 callouts</h1>
    <div class="wrap">
        <div class="box pointer--bottom">
            <p class="text--center">Pointer bottom</p>
        </div>
        <div class="box pointer--top">
            <p class="text--center">Pointer top</p>
        </div>
        <div class="box pointer--left">
            <p class="text--center">Pointer left</p>
        </div>
        <div class="box pointer--right">
            <p class="text--center">Pointer right</p>
        </div>
    </div>
</div>

CSS:

.text--center {
    text-align: center;
}
.wrap {
    padding-left: 7%;
}
.title-style {
    font-weight: 100;
    font-size: 3em;
    color: #346BB3;
}
.box {
    width: 32.40741%;
    float: left;
    margin-left: 0.46296%;
    margin-right: 0.46296%;
    position: relative;
    background: #346BB3;
    color: #fff;
    padding: 1%;
    margin: 5%;
    white-space: nowrap;
    border-radius: 5px;
}
.box:after {
    content: " ";
    position: absolute;
    height: 0;
    width: 0;
    border: solid transparent;
    pointer-events: none;
    border-width: 16px;
    border-color: #fff;
}
.pointer--bottom {
    animation: animimate-pointer--bottom 500ms ease-in-out;
    animation-transform-origin: bottom center;
}
.pointer--bottom:after {
    margin-left: -16px;
    border-top-color: #346BB3;
    top: 100%;
    left: 50%;
}
.pointer--top {
    animation: animimate-pointer--top 500ms ease-in-out;
    transform-origin: top center;
}
.pointer--top:after {
    margin-left: -16px;
    border-bottom-color: #346BB3;
    top: -32px;
    left: 50%;
}
.pointer--left {
    animation: animate-pointer--left 500ms ease-in-out;
    transform-origin: left center;
}
.pointer--left:after {
    border-right-color: #346BB3;
    top: 25%;
    left: -32px;
}
.pointer--right {
    animation: animate-pointer--right 500ms ease-in-out;
    transform-origin: right center;
}
.pointer--right:after {
    border-left-color: #346BB3;
    top: 25%;
    right: -32px;
}
@keyframes animimate-pointer--bottom {
    0% {
        opacity: 0;
        transform: scale(0.1) rotate(30deg) translateY(50px) rotateX(90deg);
    }
    50% {
        transform: rotate(-10deg) rotateX(-2deg);
        opacity: 1;
    }
    70% {
        transform: rotate(3deg);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes animimate-pointer--top {
    0% {
        transform: scale(0.1) rotate(-30deg) translateY(-50px) rotateX(-90deg);
        opacity: 0;
    }
    50% {
        transform: rotate(10deg) rotateX(2deg);
        opacity: 1;
    }
    70% {
        transform: rotate(-3deg);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes animate-pointer--left {
    0% {
        transform: rotate(0deg) rotateX(-30deg);
        opacity: 0;
    }
    50% {
        transform: rotate(-10deg);
        opacity: 1;
    }
    70% {
        transform: rotate(10deg) rotateX(30deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes animate-pointer--right {
    0% {
        transform: rotate(0deg) rotateX(30deg);
        opacity: 0;
    }
    50% {
        transform: rotate(10deg);
        opacity: 1;
    }
    70% {
        transform: rotate(-10deg) rotateX(-30deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
/* work in progress */