CSS3 字体旋转进入动画

最新推荐文章于 2023-05-05 16:37:24 发布

#麻辣小龙虾#

最新推荐文章于 2023-05-05 16:37:24 发布

阅读量845

点赞数 2

分类专栏： web前端

本文链接：https://blog.csdn.net/CodingNoob/article/details/102395626

版权

web前端专栏收录该内容

99 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>CSS3 字体旋转进入动画</title>
  <style>
    .box {width:1000px;height:264px;overflow:hidden;position:relative;font-size:0;}
    .box span {font-size:200px;color:red;position:absolute;display:inline-block;width:200px;text-align:center;}
    .box span:nth-child(1) {animation:animate1 3s infinite;}
    .box span:nth-child(2) {animation:animate2 3s infinite;color:#6c20da;}
    .box span:nth-child(3) {animation:animate3 3s infinite;color:blue;}
    .box span:nth-child(4) {animation:animate4 3s infinite;color:green;}
    .box span:nth-child(5) {animation:animate5 3s infinite;color:yellow;}
    @keyframes animate1 {
      0% {
        left:1000px;
        transform: rotate(360deg);
      }
      50% {
        left:0;
        transform: rotate(0);
      }
      100% {
        left:1000px;
        transform: rotate(720deg);
      }
    }
    @keyframes animate2 {
      0% {
        left:1000px;
        transform: rotate(360deg);
      }
      50% {
        left:200px;
        transform: rotate(0);
      }
      100% {
        left:1000px;
        transform: rotate(720deg);
      }
    }
    @keyframes animate3 {
      0% {
        left:1000px;
        transform: rotate(360deg);
      }
      50% {
        left:400px;
        transform: rotate(0);
      }
      100% {
        left:1000px;
        transform: rotate(720deg);
      }
    }
    @keyframes animate4 {
      0% {
        left:1000px;
        transform: rotate(360deg);
      }
      50% {
        left:600px;
        transform: rotate(0);
      }
      100% {
        left:1000px;
        transform: rotate(720deg);
      }
    }
    @keyframes animate5 {
      0% {
        left:1000px;
        transform: rotate(360deg);
      }
      50% {
        left:800px;
        transform: rotate(0);
      }
      100% {
        left:1000px;
        transform: rotate(720deg);
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <span>H</span>
    <span>T</span>
    <span>G</span>
    <span>Y</span>
    <span>M</span>
  </div>
</body>
<script>
</script>
</html>

#麻辣小龙虾#

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS3 字体旋转进入动画

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>CSS3 字体旋转进入动画</title> <style> .box {width:1000px;height:264px;overflow:hidden;po...
复制链接

扫一扫