Skip to content

信息/信封

html
<span class="open-icon-info"></span>

<style>

	.open-icon-info{
    display: inline-block;
    position: relative;
    width: 16px;
    height: 12px;
    border-radius: var(--radius-box);
    border: 1px solid var(--color-font-1);
    transition: all .5s;
}
.open-icon-info::after{
    content: '';
    position: absolute;
    top: 3px;
    left: -1px;
    width: 9px;
    height: 0px;
    border-bottom: 1px solid var(--color-font-1);
    transform: rotate(38deg);
    transition: all .5s;
}
.open-icon-info::before{
    content: '';
    position: absolute;
    top: 3px;
    right: -1px;
    width: 9px;
    height: 0px;
    border-bottom: 1px solid var(--color-font-1);
    transform: rotate(-38deg);
    transition: all .5s;
}
.open-icon-info:hover,
.open-icon-info:hover::before,
.open-icon-info:hover::after{
    border-color: var(--app-color-2);
}

</style>