简介: 站长以前的朋友看到了这个小刀资源网的文章页标题段落特效很好看,找我看看怎么实现的,今天看一下果然挺好看的,于是将段落代码做出来分享给大家!鼠标滑动前以划定后截图,整体很不错,当成文章装饰很不错,代码如

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

202010261603689069708110.jpg

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

<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的段落吧,浮动中大小/颜色等自己调试更改自己喜欢的吧**/

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

本文标签: 小刀资源网   文章   段落   HTML   CSS  

温馨提示:本文是作者 爱站云 的原创文章,转载请注明出处和附带本文链接!

网友点评

本文暂无评论 - 欢迎您

您好,请先 QQ登录 后进行评论,如您已登录账户,请点击 刷新页面 再进行评论!

爱站云

爱站云

AiZhanCloud.Com

爱站云专注ZBLOG建站领域,分享个人所得技术,用心做好个人博客,喜欢的小伙伴就关注我吧! 爱站云 网站建设
«    2021年3月    »
1234567
891011121314
15161718192021
22232425262728
293031
最新留言
文章归档
站点信息
  • 文章总数:585
  • 页面总数:8
  • 分类总数:18
  • 标签总数:885
  • 评论总数:219
  • 浏览总数:437861
标签列表

Powered By Z-BlogPHP Theme By 爱站云

sitemap鲁ICP备18014478号-8后花园

免责声明:本博客所展示内容均为互联网技术教程分享,如有侵权等违规信息请联系QQ客服进行删除处理,谢谢配合!

切换白天模式 切换夜间模式 白天返回顶部 夜间返回顶部