html 边缘融合加载

html 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边缘融合加载</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;padding-bottom: 80px;background: #000000;display: flex;justify-content: center;align-items: center;flex-direction: column;}.loading {width: 300px;height: 300px;background: #000000;position: relative;display: flex;justify-content: center;align-items: center;filter: contrast(15);}.loading span {width: 30px;height: 30px;background: #ffffff;border-radius: 50%;position: absolute;left: 50px;transform-origin: 100px center;transform: rotate(calc(360deg / 8 * var(--i)));animation: show 3s infinite;filter: blur(5px);}@keyframes show {0% {transform: rotate(0deg) translateX(80px);}50%, 100% {transform: rotate(calc(360deg / 8 * var(--i)));}100% {transform: rotate(360deg) translateX(80px);}}.text {font-size: 20px;color: #ffffff;padding-left: 10px;display: flex;}.text span {padding: 0 4px;animation: upDown 1.5s ease-in-out infinite;animation-delay: calc(0.1s * var(--i));}@keyframes upDown {0% {transform: translateY(0px);}20% {transform: translateY(-24px);}40%, 100% {transform: translateY(0px);}}</style>
</head>
<body>
<div class="loading"><span style="--i:0;"></span><span style="--i:1;"></span><span style="--i:2;"></span><span style="--i:3;"></span><span style="--i:4;"></span><span style="--i:5;"></span><span style="--i:6;"></span><span style="--i:7;"></span>
</div>
<div class="text"><span style="--i:0">正</span><span style="--i:1">在</span><span style="--i:2">加</span><span style="--i:3">中</span><span style="--i:4">，</span><span style="--i:5">请</span><span style="--i:6">等</span><span style="--i:7">待</span><span style="--i:8">.</span><span style="--i:9">.</span><span style="--i:10">.</span>
</div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/148200.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！