博客园美化:给网页加上loading动画

先看看效果图: image

效果还不错吧~😄

下面,代码附上:

页首HTML:

 1 <script>
 2 window.addEventListener(
 3   'load',
 4   function () {
 5     //载入动画
 6     $('#loading-box').attr('class', 'loaded')
 7     $('#bg').css(
 8       'cssText',
 9       'transform: scale(1);filter: blur(0px);transition: ease 1.5s;'
10     )
11     $('.cover').css('cssText', 'opacity: 1;transition: ease 1.5s;')
12     $('#section').css(
13       'cssText',
14       'transform: scale(1) !important;opacity: 1 !important;filter: blur(0px) !important'
15     )
16   },
17   false
18 )
19 </script>
20 <!--加载动画 start-->
21 <div id="loading-box">
22   <div class="loading-left-bg"></div>
23   <div class="loading-right-bg"></div>
24   <div class="spinner-box">
25     <div class="loader">
26       <div class="inner one"></div>
27       <div class="inner two"></div>
28       <div class="inner three"></div>
29     </div>
30     <div class="loading-word">
31       <p class="loading-title" id="loading-title">Shu-How Zの小窝</p>
32       <span id="loading-text">Loading...</span>
33     </div>
34   </div>
35 </div>
36 <!--加载动画 end-->

 

页面定制CSS:

  1 #loading-box .loading-left-bg,
  2 #loading-box .loading-right-bg {
  3   position: fixed;
  4   z-index: 999998;
  5   width: 50%;
  6   height: 100%;
  7   background-color: rgb(81 81 81 / 80%);
  8   transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01);
  9   backdrop-filter: blur(10px);
 10 }
 11 
 12 #loading-box .loading-right-bg {
 13   right: 0;
 14 }
 15 
 16 #loading-box > .spinner-box {
 17   position: fixed;
 18   z-index: 999999;
 19   display: flex;
 20   justify-content: center;
 21   align-items: center;
 22   width: 100%;
 23   height: 100vh;
 24 }
 25 
 26 #loading-box .spinner-box .loading-word {
 27   position: absolute;
 28   color: #ffffff;
 29   font-size: 0.95rem;
 30   transform: translateY(64px);
 31   text-align: center;
 32 }
 33 
 34 p.loading-title {
 35   font-size: 1.25rem;
 36   margin: 20px 10px 4px 10px;
 37 }
 38 
 39 #loading-box .spinner-box .configure-core {
 40   width: 100%;
 41   height: 100%;
 42   background-color: #37474f;
 43 }
 44 
 45 div.loaded div.loading-left-bg {
 46   transform: translate(-100%, 0);
 47 }
 48 
 49 div.loaded div.loading-right-bg {
 50   transform: translate(100%, 0);
 51 }
 52 
 53 div.loaded div.spinner-box {
 54   display: none !important;
 55 }
 56 
 57 .loader {
 58   position: absolute;
 59   top: calc(50% - 32px);
 60   left: calc(50% - 32px);
 61   width: 64px;
 62   height: 64px;
 63   border-radius: 50%;
 64   perspective: 800px;
 65   transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01);
 66 }
 67 
 68 .inner {
 69   position: absolute;
 70   box-sizing: border-box;
 71   width: 100%;
 72   height: 100%;
 73   border-radius: 50%;
 74 }
 75 
 76 .inner.one {
 77   left: 0%;
 78   top: 0%;
 79   animation: rotate-one 1s linear infinite;
 80   border-bottom: 3px solid #efeffa;
 81 }
 82 
 83 .inner.two {
 84   right: 0%;
 85   top: 0%;
 86   animation: rotate-two 1s linear infinite;
 87   border-right: 3px solid #efeffa;
 88 }
 89 
 90 .inner.three {
 91   right: 0%;
 92   bottom: 0%;
 93   animation: rotate-three 1s linear infinite;
 94   border-top: 3px solid #efeffa;
 95 }
 96 
 97 @keyframes rotate-one {
 98   0% {
 99     transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
100   }
101 
102   100% {
103     transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
104   }
105 }
106 
107 @keyframes rotate-two {
108   0% {
109     transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
110   }
111 
112   100% {
113     transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
114   }
115 }
116 
117 @keyframes rotate-three {
118   0% {
119     transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
120   }
121 
122   100% {
123     transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
124   }
125 }

 

最后推荐一个样式网站:https://uiverse.io/loaders

里面的加载动画样式非常丰富。

posted @ 2024-05-18 15:39  Shu_HowZ  阅读(47)  评论(1编辑  收藏  举报
  • 首页
  • 关于
  • 友链
  • 留言板
  • Timeline
  • Mail
  • 发消息
  • 微信
  • QQ
  • 微博
  • Github
  • 百度
  • 宝藏网盘
  • 照片
  • 后台管理