css3动画—实现上拉提示指针动画

最新推荐文章于 2025-07-11 09:23:48 发布

Tiramisu_C

最新推荐文章于 2025-07-11 09:23:48 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Css3 CSS3学习之路文章标签： css3 动画上拉提示指针

本文链接：https://blog.youkuaiyun.com/nongweiyilady/article/details/54645406

本文介绍如何利用CSS3动画属性轻松实现上拉提示指针的效果，通过html布局和特定的css样式详细阐述了动画的实现过程。

今天要实现的内容如下图所示：

有了css3的动画属性，实现起来非常的简单。

html布局：

<div class="pointer">
   <p></p>
</div>

让.pointer的div放在你想要他显示方，p放的是指针箭头图的地片，而.pointer的div是盒子，因为裹这个箭头的盒要实现向上移动的效果，所以div的高度要比箭头高度高出10px。

css样式：

.pointer{
    position: absolute;
    height: 3.8rem;
    bottom: 3rem;
    width: 100%;
}
.pointer p{
    animation: anima-pointer 2s infinite;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -1.4rem;
    height: 2.8rem;
    width: 2.8rem;
    background: url("../images/css-sprites.png") -63px 0;
}

/*animation*/
@keyframes anima-pointer
{
    0%   {opacity:0;bottom:0}
    100%  {opacity:1;bottom:10px;}
}

其中。这是我的项目中的代码，因为我对.pointer的div还需要进行定位，所以使用了position