带延迟的脉冲文本

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

我不知道如何实现延迟显示脉冲文本的代码。我有一个背景图片，在它上面，我有2个不同的文本，它们在不同的时间出现。第一个文本还可以，但是第二个文本却有一个问题，我不知道如何使它以延迟的外观跳动。

代码：

<?php 


?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bg {
  background-image: url("https://dynamicwallpaper.club/landing-vids/1.png");
  /*https://dynamicwallpaper.club/landing-vids/1.png*/
  height: 100%; 
  /* Center and scale */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

/*still to use for wellcome*/
#test {
    margin-top: 25px;
    font-size: 8rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)

    -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein 5s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#test2 {
    margin-top: 150px;
    font-size: 2rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)


    -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein 5s;
            animation-delay: 5s;
}/* This was missing*/

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

</style>
</head>
<body>
<a href="skills.php">
  <div class="bg tekst_slika">
    <div id="test" class="centered">WELLCOME</div>
    <div id="test2" class="centered">>> Press here to start <<</div>
  </div>
</a>

</body>
</html>

谢谢大家的帮助。

html css delay pulse
1个回答
0
投票

这里是一个小提琴，我想为您提供解决方案：https://jsfiddle.net/v1pm2y8f/3/

您有一些语法错误需要修复，但主要区别在于启动时将不透明度设置为0以及使用animation-fill-mode: forwards;在淡入完成后保留动画值。

HTML

<div class="bg tekst_slika">
  <div id="test" class="centered">WELCOME</div>
  <div id="test2" class="centered">>> Press here to start <<</div>
</div>

CSS

body, html {
 height: 100%;
 margin: 0;
}

.bg {
  background-image: url("https://dynamicwallpaper.club/landing-vids/1.png");
  /*https://dynamicwallpaper.club/landing-vids/1.png*/
  height: 100%; 
 /* Center and scale */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

/* Centered text */
.centered {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: white;
}

#test,
#test2 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*still to use for wellcome*/
#test {
  margin-top: 25px;
  font-size: 8rem;
  opacity: 0;

  -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
        animation: fadein 5s;
        animation-fill-mode: forwards;
}

@keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

#test2 {
   margin-top: 150px;
   font-size: 2rem;
   opacity: 0;

   -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
        animation: fadein 5s;
        animation-delay: 5s;
        animation-fill-mode: forwards;

}

@keyframes fadein {
 from { opacity: 0; }
 to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
 from { opacity: 0; }
 to   { opacity: 1; }
}
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.