css实现下拉菜单以及下拉箭头旋转效果

最新推荐文章于 2022-02-26 09:49:21 发布

hst❀

最新推荐文章于 2022-02-26 09:49:21 发布

阅读量3.2k

点赞数 1

分类专栏： CSS 一些demo

本文链接：https://blog.csdn.net/HuangsTing/article/details/102516267

版权

CSS 同时被 2 个专栏收录

24 篇文章 2 订阅

订阅专栏

一些demo

19 篇文章 0 订阅

订阅专栏

<div class="header-admin">
    <div class="header-admin-name">用户名</div>
</div>

.header-admin-name{
    position: relative;
}

.header-admin>div.header-admin-name::before {
    content: '';
    position: absolute;
    right: -18px;
    top: 50%;
    margin-top: -3px;
    width: 12px;
    height: 6px;
    cursor: pointer;
    background: url("../../assets/img/icon_arrow.png") no-repeat;
    -webkit-transition: all .2s;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
}

.header-admin:hover>div.header-admin-name::before{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transition: transform 0.2s;
    -moz-transition: -moz-transform 0.2s;
    -o-transition: -o-transform 0.2s;
    -ms-transition: -ms-transform 0.2s;
}