查看: 1038|回复: 0

[网站源码] 渐变闪亮预加载HTML动画源码

[复制链接]
累计签到:253 天
连续签到:1 天

1862

主题

-208

回帖

1万

积分

域主

名望
0
星币
3561
星辰
6
好评
79

鼎力支持奖欢乐天使奖灌水天才奖幸运猪我是土豪在线大神

发表于 2022-11-14 12:00:00 | 显示全部楼层 |阅读模式

注册登录后全站资源免费查看下载

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

×
预加载器是您在页面的其余内容仍在加载时在屏幕上检查的内容。预加载器或加载器通常是简单或复杂的动画,用于在服务器操作完成处理时让访问者保持娱乐。

HTML
  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3.    <head>
  4.       <meta charset="utf-8">
  5.       <title>渐变闪亮加载动画 - 科学刀巨神</title>
  6.       <link rel="stylesheet" href="style.css">
  7.    </head>
  8.    <body>
  9.       <div class="outer"></div>
  10.       <div class="inner">
  11.          <span>0%</span>
  12.       </div>
  13.       <script>
  14.          let outer = document.querySelector(".outer");
  15.          let inner = document.querySelector(".inner");
  16.          let percent = document.querySelector("span");
  17.          let count = 0;
  18.          inner.addEventListener('click', function(){
  19.            let loading = setInterval(function(){
  20.              if(count == 100){
  21.                outer.classList.remove("active-loader");
  22.                outer.classList.add("active-loader-2");
  23.                clearInterval();
  24.              }else{
  25.                count = count + 1;
  26.                percent.textContent = count + '%';
  27.                outer.classList.add("active-loader");
  28.              }
  29.            },200);
  30.          });
  31.       </script>
  32.    </body>
  33. </html>
复制代码

style.css:
  1. html,body{
  2.   display: flex;
  3.   align-items: center;
  4.   justify-content: center;
  5.   height: 100vh;
  6.   font-family: sans-serif;
  7.   background: #240f52;
  8.   overflow: hidden;
  9. }
  10. .outer{
  11.   height: 300px;
  12.   width: 300px;
  13.   background: linear-gradient(135deg,#FEED07 0%,#FE6A50 5%,#ED00AA 15%,#2FE3FE 50%,#8900FF 100%);
  14.   border-radius: 50%;
  15. }
  16. .inner{
  17.   position: absolute;
  18.   width: 275px;
  19.   height: 275px;
  20.   text-align: center;
  21.   line-height: 275px;
  22.   background: #240f52;
  23.   border-radius: 50%;
  24.   cursor: default;
  25.   /* opacity: 0; */
  26. }
  27. .inner span{
  28.   font-size: 60px;
  29.   font-weight: 800;
  30.   background: linear-gradient(135deg,#FEED07 0%,#FE6A50 5%,#ED00AA 15%,#2FE3FE 50%,#8900FF 100%);
  31.   color: transparent;
  32.   -webkit-background-clip: text;
  33.   background-size: 300%;
  34. }
  35. .outer.active-loader{
  36.   animation: rotate 2s ease infinite;
  37. }
  38. @keyframes rotate {
  39.   to{
  40.     transform: rotate(360deg);
  41.   }
  42. }
  43. .outer.active-loader-2{
  44.   animation: rotate2 3s ease;
  45. }
  46. @keyframes rotate2 {
  47.   to{
  48.     transform: rotate(360deg);
  49.   }
  50. }
复制代码

我发的破/解游戏的解压密码都是XDGAME
有任何问题私信版主可爱喵不要私信我,我比较少上线,可爱喵每天都会回复私信
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|偏爱技术社区-偏爱技术吧-源码-科学刀-我爱辅助-娱乐网--教开服-游戏源码

偏爱技术社区-偏爱技术吧-源码-科学刀-我爱辅助-娱乐网-游戏源码

Powered by Discuz! X3.5

GMT+8, 2024-11-22 12:37 , Processed in 0.084337 second(s), 33 queries .

快速回复 返回顶部 返回列表