标题字延迟动画效果

最新推荐文章于 2024-10-10 19:30:00 发布

codingFunTime

最新推荐文章于 2024-10-10 19:30:00 发布

阅读量123

点赞数 1

分类专栏：前端动画文章标签： css html css3

原文链接：https://codepen.io/stevenlei/pen/MWjdWvp

版权

前端动画专栏收录该内容

23 篇文章 1 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CodePen - Animated Highlight</title>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <div id="container">
    <h1>
      <span><i style="--i:0">The</i></span>
      <span><i style="--i:1">best</i></span>
      <span><i style="--i:2">products</i></span>
      <span><i style="--i:3">start</i></span>
      <span><i style="--i:4">with</i></span>
      <span><i style="--i:5">Sketch</i></span>
    </h1>
    <p>
      Create, prototype, collaborate, and bring your ideas to life with the design platform used by over one million
      people — from freelancers, to the world’s largest teams.
    </p>
  </div>
</body>

</html>

css

:root {
  font-size: 32px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  font-family: Helvetica;
}

#container {
  width: 600px;
}

h1 {
  margin: 0;
  letter-spacing: -2px;
}


span {
  display: inline-block;
  overflow: hidden;
  position: relative;
  top: .8rem;
  animation: .3s swift-up ease-in-out forwards calc(var(--i) * 0.1s);
}

i {
  font-style: normal;
  position: relative;
  top: 2rem;
  animation: .5s swift-up ease-in-out forwards calc(var(--i) * 0.1s);
}

@keyframes swift-up {
  to {
    top: 0rem;
  }
}


p {
  font-size: .9rem;
  color: #666;
  line-height: 1.3rem;
  position: relative;
  top: .8rem;
  opacity: 0;
  animation: .5s swift-up ease-out forwards, .5s fade-in ease-out forwards;
  animation-delay: .8s;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}