Question

以下内容构成了动画的基础：

HTML：

div class="lasvegas">
Events f<span>ro</span>m<br>
Philosophy <span class="delay">to</span> Nightclubs 
</div>

CSS：

@import
    url(//fonts.googleapis.com/cssfamily=Pacifico);
body {
    min-height:100vh;
    padding-top:5rem;
    background:
        #112
        url(//images.weserv.nl/url=i.imgur.com/6QJjYMe.jpg)
        center no-repeat;
    background-size: cover;
    margin: 0;
    overflow:hidden;
}
.
.lasvegas {
    font-family: 'Pacifico', cursive;
    font-size:80px;
    border: none;
    color: rgba(255,255,255,0.6);
    text-align:
        center;
    text-shadow: 1px 5px 4px rgba(0,0,0,.3), 0 0 2px
        rgba(255,255,255,1), 0 0 10px
        rgba(255,255,255,1),  0 0 20px rgba(255,255,255,1), 0 0
        30px rgba(255,255,255,1),  0 0 40px #ff00de,0 0 70px
        #ff00de,  0 0 80px #ff00de, 0 0 100px #ff00de;
}
.lasvegas
span {
    animation: blink .3s infinite alternate;
}
.lasvegas
span.delay {
    animation-duration:6s;
    animation-delay: 2s
        animation-direction: alternate;
    cubic-bezier(0.5, 0.2, 0.3,
    1.0)
}

keyframes blink {
    0%  {
    }

    50% {
    }

    60% {
        text-shadow:0 0
            2px rgba(255, 255, 255, .1), 0 0 10px rgba(255, 255, 255, .
                4); text-stroke: 2px rgba(255,255,255,0.05);
    }

    70% {
        text-
        shadow: 0 0 2px rgba(255,255,255,1), 0 0 10px.
            rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 0
            30px rgba(255,255,255,1),  0 0 40px #ff00de, 0 0 70px
            #ff00de, 0 0 80px #ff00de,  0 0 100px #ff00de;
    }

    80% {
        text-shadow:0 0 2px rgba(255, 255, 255, .1), 0 0 10px
            rgba(255, 255, 255, .4);
        text-stroke: 2px
            rgba(255,255,255,0.05);
    }

    100% {
        text-shadow: 0 0 2px
            rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1), 0 0
            20px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,1),0
            0 40px #ff00de,0 0 70px #ff00de, 0 0 80px #ff00de, 0 0
            100px #ff00de;
    }

}

它用于WordPress中的事件页面。问题是@import似乎正在阻止代码正常工作。有替代的CSS或HTML吗？

Answer 1

在CSS中尝试：

@import url('https://fonts.googleapis.com/css?family=Pacifico');

或此代码：

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

我认为这会有所帮助。：）

@import的替代品

1 个答案: