CSS 中的文本展开动画

问题描述 投票：0回答：1

所以，我目前正在处理我的 GTA RP 加载屏幕，该屏幕只是一个 HTML 网页。 我对我想要的样子有一个大概的了解，它与“新秀”系列开头的动画相同（类似于：https://www.youtube.com/watch?v=8Q4UALvlcVQ） 。文本从左向右滚动，然后放大文本和背景。

到目前为止，我已经尝试将此代码笔调整为有弹性的一面，但没有成功：

const app = document.getElementById('app');
const musique = app.querySelector('audio');
const volume = app.querySelector('#volume');
const VOLUME_MAX_MULT = 0.8;

function setVolume(volume) {
    musique.volume = (volume / 100) * VOLUME_MAX_MULT;
}

function bootstrap() {
    // Change volume
    volume.addEventListener('input', (event) => {
      setVolume(event.currentTarget.value);
    });

    musique.play()
}

window.addEventListener('message', function(e) {
    if (e.data.eventName === 'initFunctionInvoking' && e.data.name === 'FinalizeLoad') {

        setInterval(function () {
            if (musique.volume > 0.01) {
                musique.volume -= 0.01;
            }
        }, 50);
    }
});

bootstrap();
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap');

* {
    user-select: none;
}

body {
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

#logo {
    position: absolute;
    color: white;
    align-content: center;
    width: 100%;
    height: 100%;
}

#logo-container {
    font-family: 'Prompt';
    text-transform: uppercase;
    font-size: 128px;
    align-content: center;
    text-align: center;
}

#sunset {
    overflow:hidden;
    animation: revealup 2s;
}

#rp {
    overflow: hidden;
    animation:reveal 2s;
}


@keyframes reveal {
    0% {width:0px;}
    20% {width:0px;}
    40% {width:500px;}
}
@keyframes revealup {
    0% {height:0px;}
    20% {height:30px;}
}



#rp {
    font-family: 'Prompt';
    text-transform: uppercase;
    font-size: 96px;
    align-content: center;
    text-align: center;
}

#app {
    position: absolute;
    inset: 0;
}

img {
    position: absolute;
    z-index: -1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.box {
    color: #ffffff;
    padding: .3rem 1rem;
    background: rgba(0,0,0,.6);
    border-radius: .3rem;
}

.container {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .3rem 1rem;
    margin: 1vh 1vw;
    background: rgba(0,0,0,.5);
    border-radius: .5rem;
    z-index: 1;
}

.volume-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.volume-container svg {
    color: rgba(255,255,255,.8);
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .2rem;
}

.volume-container input {
    height: 0.3rem;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="assets/style.css" rel="stylesheet" type="text/css" />
    <script src="assets/app.js" defer></script>
</head>
<body>
    <div id="app">
        <div id="logo">
            <div id="logo-container">
                <div id="sunset">Sunset</div>
                <div id="rp">
                    RP
                </div>
            </div>
        </div>
        <div class="container">
            <div class="volume-container">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
                </svg>
                <input type="range" id="volume">
            </div>
        </div>
        <img id="image" src="https://cdn2.steamgriddb.com/hero_thumb/e6293d6df91c1f64f6ce1d86c8be87e4.jpg" />
        <audio src="assets/musique.mp3" loop></audio>
    </div>
</body>
</html>

css css-animations
1个回答
0
投票

我为您的动画使用了 css 放大缩小功能，并添加了 

animation: zoom-in-zoom-out 3s ease;
另外，您可以在下面的代码中看到关键帧值。另外，我为
#logo
id 添加了此功能，如果您想取消缩放功能
delay
，您可以在css代码中删除
animation-delay:2s;
下的
logo id
。

@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap');

* {
    user-select: none;
}

body {
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

#logo {
    position: absolute;
    color: white;
    align-content: center;
    width: 100%;
    height: 100%;
}

#logo-container {
    font-family: 'Prompt';
    text-transform: uppercase;
    font-size: 128px;
    align-content: center;
    text-align: center;
}

#sunset {
    overflow:hidden;
    animation: revealup 1.5s;
    font-size: 100px;
    margin-top: -40px;
}

#rp {
    overflow: hidden;
    animation:reveal 1s;
    margin-right: 290px;
}

#logo {
  animation: zoom-in-zoom-out 3s ease;
  animation-delay:2s;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes revealup {
  0% {
    transform: translateX(-500px);
  }
  100% {
    transform: translateX(0px);
  }
}

@keyframes reveal {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0px);
  }
}




#rp {
    font-family: 'Prompt';
    text-transform: uppercase;
    font-size: 50px;
    align-content: center;
    text-align: center;
}

#app {
    position: absolute;
    inset: 0;
}

img {
    position: absolute;
    z-index: -1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.box {
    color: #ffffff;
    padding: .3rem 1rem;
    background: rgba(0,0,0,.6);
    border-radius: .3rem;
}

.container {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .3rem 1rem;
    margin: 1vh 1vw;
    background: rgba(0,0,0,.5);
    border-radius: .5rem;
    z-index: 1;
}

.volume-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.volume-container svg {
    color: rgba(255,255,255,.8);
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .2rem;
}

.volume-container input {
    height: 0.3rem;
}
<!doctype html>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="assets/style.css" rel="stylesheet" type="text/css" />
    <script src="assets/app.js" defer></script>
</head>
<body>
    <div id="app">
        <div id="logo">
            <div id="logo-container">
              <div id="rp">
                    RP
                </div>
                <div id="sunset">Sunset</div>
            </div>
        </div>
        <div class="container">
            <div class="volume-container">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
                </svg>
                <input type="range" id="volume">
            </div>
        </div>
        <img id="image" src="https://cdn2.steamgriddb.com/hero_thumb/e6293d6df91c1f64f6ce1d86c8be87e4.jpg" />
        <audio src="assets/musique.mp3" loop></audio>
    </div>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.