WordPress流光炫彩动态彩色文字

释放双眼,带上耳机,听听看~!

目录

    演示

    代码

    <div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong><span class="badge bg-danger">
    Hello,旅行者!<sup aria-hidden="true" class="spinner-grow spinner-grow-sm ml-1 small" role="status" style=" width: .5rem; height: .5rem; "></sup></span></strong> <span>Hello,旅行者!</span>
    <a class="badge bg-warning text-dark" href=""
                   rel="nofollow noopener noreferrer" target="_blank">
    Hello,旅行者!
    </a>
    </div>

    CSS

    .alert-warning {
        color: #664d03;
        background-color: #fff3cd;
        border-color: #ffecb5;
    }
    
    .alert-dismissible {
        padding-right: 3rem;
    }
    .alert {
        position: relative;
        padding: 1rem 1rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: .25rem;
    }
    
    @media (prefers-reduced-motion: reduce){
    .fade {
        transition: none;
    }
    }
    .fade {
        transition: opacity .15s linear;
    }
    .bg-danger {
        background-color: #dc3545!important;
    }.badge {
        display: inline-block;
        padding: .35em .65em;
        font-size: .75em;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25rem;
    }
    .bg-warning {
        background-color: #ffc107!important;
    }
    .text-dark {
        color: #212529!important;
    }.alert-dismissible .btn-close {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        padding: 1.25rem 1rem;
    }
    .btn-close {
        box-sizing: content-box;
        width: 1em;
        height: 1em;
        padding: .25em .25em;
        color: #000;
        border: 0;
        border-radius: .25rem;
        opacity: .5;
    }
    
    @media (prefers-reduced-motion: reduce){
    .spinner-border, .spinner-grow {
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
    }
    }
    
    .spinner-grow-sm {
        width: 1rem;
        height: 1rem;
    }.spinner-grow {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        vertical-align: -.125em;
        background-color: currentColor;
        border-radius: 50%;
        opacity: 0;
        -webkit-animation: .75s linear infinite spinner-grow;
        animation: .75s linear infinite spinner-grow;
    }.small, small {
        font-size: .875em;
    }
    @keyframes spinner-grow {
      0% {
        transform: scale(0);
      }
      50% {
        opacity: 1;
        transform: none;
      }
    }
    
    .btn-close:hover {
        color: #000;
        text-decoration: none;
        opacity: .75;
    }
    
    sup.spinner-grow.spinner-grow-sm.ml-1.small {
      
        margin-left: 4px;
       
        margin-bottom: 4px;
    }
    
    文章链接:https://www.67an.com/103
    文章标题:WordPress流光炫彩动态彩色文字
    文章版权:七安 (67an.com) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!
    重要说明

    本站资源大多来自网络,如有侵犯你的权益请联系管理员七安 或给邮箱发送邮件hello😀67an.com 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


    如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip(点击下载),zip、rar解压,建议下载WinRAR(点击下载)

    给TA打赏
    共{{data.count}}人
    人已打赏
    WordPress

    WordPress添加六格小工具

    2021-12-5 19:14:42

    WordPress

    WordPress统计显示全站总访问量/今日总访问量/当前是第几个访客

    2021-12-7 12:41:44

    2 条回复 A文章作者 M管理员
    1. 七安
      七安给您打赏了¥2
    2. 七安
      七安给您打赏了¥50
    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    搜索