主页 / 问题 / 1430644
Accepted
hardi
Asked:2022-07-18 03:33:30 +0000 UTC2022-07-18 03:33:30 +0000 UTC

如何在加载时制作这样的动画？

  • 772

https://labs.pepsico.com/ 如何在加载时制作这样的动画？如何实现这样的增加字母？

html css

1 个回答

  1. Best Answer

    具体来说，在给定的站点上，简单地插入了 svg。但这太无聊了，所以这里有一个mix-blend-mode的选项

    .loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
    display: flex;
    justify-content: center;
    align-items: center;

    white-space: nowrap;
    overflow: hidden;
  
    /* для анимации текста */
    font-size: 15vh;
    transition-duration: .5s;
    animation: 3s infinite alternate slidein 1s;
  
    /* суть в этих свойствах */
    background: white;
    mix-blend-mode: lighten;
}

@keyframes slidein {
  0% {
    font-size: 15vh;
    opacity: 1;
  }
  
  70% {
    opacity: 1;
  }

  100% {
    font-size: 100vh;
    opacity: 0;
  }
}

.content {
  width: 100vw;
  height: 100vh;
  background-image: url("https://picsum.photos/seed/pepsi/0")
}
    <div class="content"></div>


<div class="loader">
  some text
</div>

    • 0

相关问题