抖音动画 loading | 特效源码

[复制链接]
七夏(UID:1) 发表于 2024-10-17 21:26:09 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×

图片

<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
 </head>
 <style>
  body {display: flex;justify-content: center;margin-top: 300px;background-color: #212121;}
  .glitch{position:relative;font-size:25px;font-weight:700;line-height:1.2;color:#fff;letter-spacing:5px;z-index:1;animation:shift 1s ease-in-out infinite alternate;}.glitch:before,.glitch:after{display:block;content:attr(data-glitch);position:absolute;top:0;left:0;opacity:0.8;}.glitch:before{animation:glitch 0.4s cubic-bezier(0.25,0.46,0.45,0.94) both infinite;color:#8b00ff;z-index:-1;}.glitch:after{animation:glitch 0.4s cubic-bezier(0.25,0.46,0.45,0.94) reverse both infinite;color:#00e571;z-index:-2;}@keyframes glitch{0%{transform:translate(0);}20%{transform:translate(-3px,3px);}40%{transform:translate(-3px,-3px);}60%{transform:translate(3px,3px);}80%{transform:translate(3px,-3px);}to{transform:translate(0);}}@keyframes shift{0%,40%,44%,58%,61%,65%,69%,73%,100%{transform:skewX(0deg);}41%{transform:skewX(10deg);}42%{transform:skewX(-10deg);}59%{transform:skewX(40deg) skewY(10deg);}60%{transform:skewX(-40deg) skewY(-10deg);}63%{transform:skewX(10deg) skewY(-5deg);}70%{transform:skewX(-50deg) skewY(-20deg);}71%{transform:skewX(10deg) skewY(-10deg);}}
 </style>
 <body>
  <div class="loader">
     <div data-glitch="抖音 Loading..." class="glitch">抖音 Loading...</div>
  </div>
 </body>
 <script>
 </script>
</html>

小时候,看腻了农村的牛和马,长大后,来到了城里,才知道原来到处都是牛马!
全部回复0 显示全部楼层
暂无回复,精彩从你开始!

快速回帖

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于楼主

管理员
  • 主题

    710
  • 回答

    248
  • 积分

    1903
虚位以待,此位置招租

商务推广

    网盘拉新-短剧推广 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租