ghost——封面背景及字体特效

文字特效

  <div class="center-text glitch is-glitching Ubuntu-font" 
       data-text="{{@site.description}}">
                {{#unless @member}}
                {{#if @custom.email_signup_text}}
                {{@custom.email_signup_text}}
                {{else}}
                {{@site.description}}
                {{/if}}
                {{else}}
                {{@site.description}}
                {{/unless}}
            </div>

注意类名
css代码

 .glitch {
        position: relative;
        color: #fff;
        mix-blend-mode: lighten
    }

    .glitch:before,
    .glitch:after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0);
        clip: rect(0, 0, 0, 0)
    }

    .glitch:before {
        left: -1px;
        text-shadow: 1px 0 #ff3f1a;
    }

    .glitch:after {
        left: 1px;
        text-shadow: -1px 0 #00a7e0
    }

    .glitch:hover:before {
        text-shadow: 4px 0 #ff3f1a;
        animation: glitch-loop-1 .8s infinite ease-in-out alternate-reverse
    }

    .glitch:hover:after {
        text-shadow: -5px 0 #00a7e0;
        animation: glitch-loop-2 .8s infinite ease-in-out alternate-reverse
    }

    @-webkit-keyframes glitch-loop-1 {
        0% {
            clip: rect(36px, 9999px, 9px, 0)
        }

        25% {
            clip: rect(25px, 9999px, 99px, 0)
        }

        50% {
            clip: rect(50px, 9999px, 102px, 0)
        }

        75% {
            clip: rect(30px, 9999px, 92px, 0)
        }

        100% {
            clip: rect(91px, 9999px, 98px, 0)
        }
    }

    @keyframes glitch-loop-1 {
        0% {
            clip: rect(36px, 9999px, 9px, 0)
        }

        25% {
            clip: rect(25px, 9999px, 99px, 0)
        }

        50% {
            clip: rect(50px, 9999px, 102px, 0)
        }

        75% {
            clip: rect(30px, 9999px, 92px, 0)
        }

        100% {
            clip: rect(91px, 9999px, 98px, 0)
        }
    }

    @-webkit-keyframes glitch-loop-2 {
        0% {
            top: -1px;
            left: 1px;
            clip: rect(65px, 9999px, 119px, 0)
        }

        25% {
            top: -6px;
            left: 4px;
            clip: rect(79px, 9999px, 19px, 0)
        }

        50% {
            top: -3px;
            left: 2px;
            clip: rect(68px, 9999px, 11px, 0)
        }

        75% {
            top: 0;
            left: -4px;
            clip: rect(95px, 9999px, 53px, 0)
        }

        100% {
            top: -1px;
            left: -1px;
            clip: rect(31px, 9999px, 149px, 0)
        }
    }

    @keyframes glitch-loop-2 {
        0% {
            top: -1px;
            left: 1px;
            clip: rect(65px, 9999px, 119px, 0)
        }

        25% {
            top: -6px;
            left: 4px;
            clip: rect(79px, 9999px, 19px, 0)
        }

        50% {
            top: -3px;
            left: 2px;
            clip: rect(68px, 9999px, 11px, 0)
        }

        75% {
            top: 0;
            left: -4px;
            clip: rect(95px, 9999px, 53px, 0)
        }

        100% {
            top: -1px;
            left: -1px;
            clip: rect(31px, 9999px, 149px, 0)
        }
    }

    *:before,
    *:after {
        box-sizing: inherit;
    }




    /* latin */
    @font-face {
        font-family: 'Ubuntu';
        font-style: normal;
        font-weight: 700;
        src: url(https://fonts.gstatic.com/s/ubuntu
        /v20/4iCv6KVjbNBYlgoCxCvjsGyNPYZvgw.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 
        U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, 
        U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
        U+FFFD;
    }

    .Ubuntu-font {
        font-family: 'Ubuntu';
    }

    h1 {
        display: block;
        font-size: 2em;
        margin-block-start: 0.67em;
        margin-block-end: 0.67em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
    }

    .center-text {
        margin: auto;
        font-family: 'Ubuntu';
        font-size: 80px;
        text-transform: uppercase;
        white-space: nowrap;
    }

封面蒙版效果

<div class="headertop filter-dot" style="height: auto;">
</div>

图片元素外层 包了一层div
css代码

.headertop:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 3;
        background-attachment: fixed;
    }


    .headertop.filter-undertint:before {
        background-color: rgba(255, 255, 255, .3)
    }

    .headertop.filter-dim:before {
        background-color: rgba(0, 0, 0, .3)
    }

    .headertop.filter-grid:before {
        background-image: url(https://jsdelivr.2heng.xin/gh/
        moezx/cdn@3.1.9/img/Sakura/images/grid.png)
    }

    .headertop.filter-dot:before {
        background-image: url(https://jsdelivr.2heng.xin/gh/moezx/
        cdn@3.1.9/img/Sakura/images/dot.gif);
    }

    @media (max-width: 860px) {
        .headertop.filter-dot:before {
            /* background-image:url(https://jsdelivr.2heng.xin/gh/
            moezx/cdn@3.1.9/img/Sakura/images/grid.png); */
        }
    }