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>
标签:demo,100%,transform,animation,background,webkit,position,css From: https://www.cnblogs.com/GOOGnine/p/17571739.html