• 登录
社交账号登录
扫描微信二维码 扫描微信公众号
精彩与您分享

tag标签样式分享

小秋同学 收藏 755 2021-04-17 08:51:15

    大家好,每天分享做站经验,今天分享一个比较好看的文章标签效果:

tag标签样式分享(图1)

这个效果比较好,可以自己利用下。


以下是html代码和CSS样式代码分享:


HTML:


 <div class="tags"> 

       {eyou:tag sort='now' getall='0' row='10'}

<a href="{$field.link}" target="_blank" title="{$field.tag}">{$field.tag}</a>

{/eyou:tag}


       </div>


CSS:


.tags {

    margin: 40px 0 10px 0;

}

.tags a {

    background-color: #f8f9fa;

    border-radius: 3px;

    font-size: 14px;

    padding: 4px 8px;

    margin: 0 10px 0 0;

    

    position: relative;

    width: 100px;

    height: 60px;

    text-align: center;

    line-height: 60px;

    margin: 10px;

    text-decoration: none;

    color: aqua;

    padding: 0 20px;

    text-transform: uppercase;

    transition: 0.5s;

    overflow: hidden;

    -webkit-box-reflect: below 1px linear-gradient(transparent, #1113);

    

}



        .tags a::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 15px;

            height: 15px;

            border-top: 2px solid aqua;

            border-left: 2px solid aqua;

            transition: 0.5s;

            transition-delay: 0.5s;

        }

       .tags a::after {

            content: '';

            position: absolute;

            bottom: 0;

            right: 0;

            width: 15px;

            height: 15px;

            border-bottom: 2px solid aqua;

            border-right: 2px solid aqua;

            transition: 0.5s;

            transition-delay: 0.5s;

        }

       .tags a:hover::before, a:hover::after {

            width: 100%;

            height: 100%;

            transition-delay: 0s;

        }

       .tags a:hover {

            background-color: aqua;

            color: #000;

            box-shadow: 0 0 50px #21ebff;

            transition-delay: 0.3s;

        }

       .tags a:nth-child(1) {

            filter: hue-rotate(150deg);

        }

       .tags a:nth-child(3) {

            filter: hue-rotate(270deg);

        }

       .tags a:nth-child(4) {

            filter: hue-rotate(400deg);

        }

       .tags a:nth-child(5) {

            filter: hue-rotate(70deg);

        }


本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

本文链接:https://www.yuanma.cc/article/SEO/1808.html
分享给朋友: