有序列表的数字编号效果

DeanShiDirect commented 2 years ago

有序列表的数字编号效果，如鼠标放在1上，数字自动旋转。这个怎么实现呢？其他主题没有这个效果。惊艳！

muggledy commented 2 years ago

你好，这个特效来自于Butterfly，是基于伪元素实现，示例如下：

<html>
<head>
    <style>
    ol li{
        list-style-type: none;
    }
    ol li:before{
        counter-increment: li;
        content: counter(li);
        position: absolute;
        background: gray;
        color: white;
        margin-top: 3px;
        margin-left: -25px;
        width: 1.65em;
        height: 1.65em;
        border-radius: 0.825em;
        text-align: center;
        font-size: .65em;
        line-height: 1.7em;
        transition: all .3s ease-out;
    }
    ol li:first-child{
        counter-reset: li;
    }
    ol li:hover:before{
        transform: rotate(360deg);
    }
    </style>
</head>
<body>
    <ol>
        <li>有序列表项1<br>
            <ol>
                <li>嵌套列表项1</li>
                <li>嵌套列表项2</li>
            </ol>
        </li>
        <li>有序列表项2</li>
    </ol>
</body>
</html>

DeanShiDirect commented 2 years ago

感谢你的解答

muggledy / typora-dyzj-theme

有序列表的数字编号效果 #9