css-demo

1、文字放大缩小

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            
            @keyframes scaleDraw {

                
                0% {
                    transform: scale(1);
                }

                25% {
                    transform: scale(1.5);
                }

                50% {
                    transform: scale(1);
                }

                75% {
                    transform: scale(1.5);
                }
            }

            .ballon {
              border-radius:50%;
              background-color:#f00;
                width: 100px;
                height: 100px;
                display: flex;
  　　　　　　　　justify-content: center;
 　　　　　　　　align-items: center;
                -WEBkit-animation-name: scaleDraw;
                -webkit-animation-timing-function: ease-in-out;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-duration: 5s;    
            }
        </style>
    </head>

    <body>
        <div class="ballon">123456666</div>
    </body>
</html>

2、文字水流滑动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
    .center_common{
  position: absolute;
   /*background: #f00;*/
  width: 201px;
  height: 114px;
  transform: perspective(800px) rotateZ(29deg) rotateY(30deg) rotateX(52deg);
  background-image: -webkit-linear-gradient(left, #62aacb ,#fff);
  -webkit-text-fill-color: transparent;
  /* 将字体设置成透明色 */
  -webkit-background-clip: text;
  /* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 3s linear infinite;
  animation:masked-animation 3s linear infinite;

}

@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@-webkit-keyframes masked-animation{
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
        </style>
    </head>

    <body>
        <div class="center_common">123456666</div>
    </body>
</html>

 3、文字轮流放大缩小

<body>
    <div class="container">
        <span>投</span>
        <span>币</span>
        <span>点</span>
        <span>赞</span>
        <span>收</span>
        <span>藏</span>
    </div>
</body>



.container {
  font-size: 50px;

  span {
    // 为了能让SPAN动画生效，需要设置
    display: inline-block;
    animation: run 8s ease infinite;
  }

  span:nth-child(1) {
    animation-delay: 0s;
  }

  span:nth-child(2) {
    animation-delay: 1s;
  }

  span:nth-child(3) {
    animation-delay: 2s;
  }

  span:nth-child(4) {
    animation-delay: 3s;
  }

  span:nth-child(5) {
    animation-delay: 4s;
  }

  span:nth-child(6) {
    animation-delay: 5s;
  }
  span:nth-child(7) {
    animation-delay: 6s;
  }
  span:nth-child(8) {
    animation-delay: 7s;
  }
  span:nth-child(9) {
    animation-delay: 8s;
  }
}

@keyframes run {

  // 注意一个时间的刻度,调整让动画变成我们想要的样子
  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.2);
  }

  30%,
  100% {
    transform: scale(1);
  }
}

 

posted @ 2023-07-21 16:17  灯下一个人  阅读(9)  评论(0)  编辑  收藏  举报