双下箭头引导式动态跳动效果(Less中的实现)

hyupeng1006

于 2021-02-03 17:21:40 发布

阅读量592

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/hyupeng1006/article/details/113615515

版权

css 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用CSS和LESS实现的下拉箭头图标案例，其中包括了基本的HTML结构、LESS定义的样式及动画效果。通过:before和:after伪元素创建两个旋转的三角形作为箭头，并利用LESS函数封装了底部移动的动画。

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

先上图：

Html部分：

<div className={style.down} />

less部分：

.down {
    height: 50px;
    width: 30px;
    display :inline-block;
    position: relative;
    left: 30px;
}

.down::before {
    content: "";
    height: 22px;
    width: 22px;
    border-width: 4px 4px 0 0;
    border-color: #1890ff;
    border-style: solid;
    transform: rotate(135deg);
    position: absolute;
  }
  .down::after {
    content: "";
    height: 22px;
    width: 22px;
    top: 13px;
    border-width: 4px 4px 0 0;
    border-color: #1890ff;
    border-style: solid;
    transform: rotate(135deg);
    position: absolute;
  }

// 封装的动画效果
.keyframesFunction (@name,@content){
    @keyframes @name{
        @content();
    }      
}
//引用时写进所需要的css样式中
.down{
    .keyframesFunction (down,{
        0% {bottom: 30px;}
        100% {bottom: 10px;}
    });
    animation: down 1s infinite;
}