站长以前的朋友看到了这个小刀资源网的文章页标题段落特效很好看，找我看看怎么实现的，今天看一下果然挺好看的，于是将段落代码做出来分享给大家！

鼠标滑动前以划定后截图，整体很不错，当成文章装饰很不错，代码如下：

<div class="news">
    <h1>H1标题</h1>
    <p>这里是文章内容（浮动只写了H1的点击事件和滑动事件）</p>

    <h2>H2标题</h2>
    <p>这里是文章内容</p>

    <h3>H3标题</h3>
    <p>这里是文章内容</p>

    <h4>H4标题</h4>
    <p>这里是文章内容</p>

    <h5>H5标题</h5>
    <p>这里是文章内容</p>
</div>

<!--.news是我文章的框架，一个案例，自己用的时候，对应自己的文章页面框架写好CSS里就好-->

css代码：

    .news h1 {
        position: relative;
        padding: 5px 0 15px;
        color: #424242;
        font-size: 18px;
        display: -webkit-inline-box;
        border-bottom: 1px solid #fff;
        cursor: pointer;
        z-index: 16;
        font-weight: 700;
        line-height: 30px;
    }

    .news h1:before {
        position: absolute;
        top: 35px;
        left: 0;
        z-index: -1;
        width: 45%;
        height: 2px;
        background: #1b54bc;
        content: " ";
        border-radius: 20px;
        transition: all .5s
    }

    .news h1:hover:before {
        width: 100%;
        transition: all .5s
    }

/**只做了H1的大家根据自己的需求做H1-H6的段落吧，浮动中大小/颜色等自己调试更改自己喜欢的吧**/

文章段落每个网站都需要，也是百花八门，如喜欢这套样式，就调试替换吧，本样式来源于小刀资源网文章页面，调试过程中不显示或者显示不对可以联系爱站云进行付费操作哟！