<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="icon" href="./favicon.ico"> <title><%= webpackConfig.name %></title> <style> .loading { height: 90vh; display: flex; justify-content: center; align-items: center; } .wavy { position: relative; -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2)); } .wavy span { position: relative; display: inline-block; color: rgb(21, 144, 214); font-size: 50px; text-transform: uppercase; letter-spacing: 8px; /* 执行动画:动画名 时长 加速后减速 无限次播放 */ animation: wavyAnimate 1s ease-in-out infinite; /* 通过var函数调用自定义属性--i,在计算出动画延迟时间 */ animation-delay: calc(0.1s * var(--i)); } @keyframes wavyAnimate { 0% { transform: translateY(0); } 20% { transform: translateY(-20px); } 40%, 100% { transform: translateY(0); } } </style> </head> <body> <noscript> <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"> <div class="loading"> <div class="wavy"> <!-- --i是自定义属性,可通过var函数调用 --> <span style="--i:1;">l</span> <span style="--i:2;">o</span> <span style="--i:3;">a</span> <span style="--i:4;">d</span> <span style="--i:5;">i</span> <span style="--i:6;">n</span> <span style="--i:7;">g</span> <span style="--i:8;">.</span> <span style="--i:9;">.</span> <span style="--i:10;">.</span> </div> </div> </div> <!-- built files will be auto injected --> </body> </html>
动态loading效果
最新推荐文章于 2023-09-20 18:08:42 发布