css-demo-526互联

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>