CSS动画实例：跳跃的字符

1．翻转的字符

在页面中放置一个类名为container的层作为容器，在该层中放置5个字符区域，HTML代码描述如下：

</div>

为container和span定义CSS样式规则，并定义实现5个字符翻转的动画关键帧。完整的HTML文件内容如下。

<!DOCTYPE html>
<html>
<head>
<title>字符翻转</title>
<style>
   .container
   {
      margin: 0 auto;
      width: 500px;
      height: 300px;
      position: relative;
      overflow: hidden;
      display:flex;
      align-items: center;
      justify-content: center;
      border: 4px solid rgba(255, 0, 0, 0.9);
      background:#d8d8d8;
      border-radius: 10%;
    }
   .container>span
   {
font-size: 130px;
    font-family: "Impact",sans-serif;
    display: inline-block;
    animation:flip 2s infinite linear;
    transform-origin:0 70%;
    transform-style:preserve-3d;
   }
   @keyframes flip
   {
    50%   { transform: rotateX(360deg); }
    100%  { transform: rotateX(360deg); }
   }
   .container>span:nth-child(1n+0) 
   {
        color:var(--color);
        animation-delay: var(--delay);
   }
</style>
</head>
<body>
<div class="container">
    <span style="--delay:0s;--color:#f00">H</span>
    <span style="--delay:0.4s;--color:#f0f">E</span>
    <span style="--delay:0.8s;--color:#ff0">L</span>
    <span style="--delay:1.2s;--color:#0ff">L</span>
    <span style="--delay:1.6s;--color:#800080">O</span>
</div>
</body>
</html>

View Code