muggledy/typora-dyzj-theme

有序列表的数字编号效果

DeanShiDirect opened this issue · 2 comments

DeanShiDirect commented

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

muggledy commented

你好，这个特效来自于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>
  • 👍1
DeanShiDirect commented

感谢你的解答