css伪元素写线框空心三角形及上下转动动画

最新推荐文章于 2024-03-14 18:00:27 发布

乌拉乌拉小菜鸡

最新推荐文章于 2024-03-14 18:00:27 发布

阅读量229

点赞数

分类专栏：笔记文章标签： css css3 前端

本文链接：https://blog.csdn.net/aufshlafen/article/details/126581336

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css:伪元素写线框空心三角形及上下转动动画

css样式代码

.blockCollapse { // 主元素
    position: relative;
    transition: all 0.3s;

    &::after {
        content: '';
        display: inline-block;
        font-size: 0;
        line-height: 0;
        vertical-align: middle;
        width: 7px;
        height: 7px;
        border-left: 1px solid #1382EF;
        border-bottom: 1px solid #1382EF;
        transform: rotate(-45deg);
        transition: all 0.3s;
        margin-left: 4px;
    }

    &.open { // 需要在选中后添加一个open的class
        &::after {
            vertical-align: 0px;
            transform: rotate(135deg);
        }
    }
}