当你的男伴在网络连接很差的情况下浏览你的博客时，你还眼睁睁地看着你的博客崩溃css加载动画，这太不人道了。 为什么不添加加载动画呢？
个人博客作为疗效参考：dreamruins.gitee.io/tutorials/1...
前言
本页面根据短书中某位博主的文章加载动画效果。 他写得很详细。 你可以点击目录【参考】，点击链接查看他的文章。 如果你有幸留下来，那么我们就开始
创建并加载动画文件
如果要添加页面加载动画，第一步就是创建相应的文件，模块化开发
结构代码
在themes>hexo-theme-matery>layout>_widget下创建loading.ejs文件，将以下代码cv放入其中
加载中...
$(document).ready(function () {
document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
})
样式代码
完成结构代码后，下面开始样式代码，不然没有样式的动画太帅了，样式代码如下
事实上，在复制粘贴代码之前，需要创建一个样式文件
在themes>hexo-theme-matery>source>css>下新建文件loading.csscss加载动画，复制粘贴以下代码
#loading-box .loading-left-bg,
#loading-box .loading-right-bg {
position: fixed;
z-index: 1000;
width: 50%;
height: 100%;
background-color: #37474f;
transition: all 0.5s;
}
#loading-box .loading-right-bg {
right: 0;
}
#loading-box>.spinner-box {
position: fixed;
z-index: 1001;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
#loading-box .spinner-box .configure-border-1 {
position: absolute;
padding: 3px;
width: 115px;
height: 115px;
background: #ffab91;
animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
}
#loading-box .spinner-box .configure-border-2 {
left: -115px;
padding: 3px;
width: 115px;
height: 115px;
background: rgb(63, 249, 220);
transform: rotate(45deg);
animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;
}
#loading-box .spinner-box .loading-word {
position: absolute;
color: #ffffff;
font-size: 0.8rem;
}
#loading-box .spinner-box .configure-core {
width: 100%;
height: 100%;
background-color: #37474f;
}
div.loaded div.loading-left-bg {
transform: translate(-100%, 0);
}
div.loaded div.loading-right-bg {
transform: translate(100%, 0);
}
div.loaded div.spinner-box {
display: none !important;
}
@keyframes configure-clockwise {
0% {
transform: rotate(0);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes configure-xclockwise {
0% {
transform: rotate(45deg);
}
25% {
transform: rotate(-45deg);
}
50% {
transform: rotate(-135deg);
}
75% {
transform: rotate(-225deg);
}
100% {
transform: rotate(-315deg);
}
}
添加到页面
在页面中添加加载动画
找到themes>hexo-theme-matery>layout>_partial>head.ejs文件，该文件专门用来引入样式文件和配置网页信息
在标签中引入loading.css文件
<link rel="stylesheet" type="text/css" href="">
导入样式文件后，导入结构文件loading.ejs，在tags>hexo-theme-matery>layout>layout.ejs下插入第一行
配置
最后在主题配置文件中配置_config.yml，true为开启； false 已关闭
# 是否开启页面加载动画
preloader:
enable: true
Matery主题定制系列比较零散，以后如果有什么新花哨的东西，我会和大家分享的
参考
我将 Butterfly 主题版本 2.3 的加载动画移至 Matery
进度条在网页中应用非常广泛，尤其是目前基于jQuery和CSS3技术的进度条插件，外观非常完美，很多甚至还相当炫酷。 这次我们就总结一些我认为近乎完美的CSS3进度条插件，之前我们也分享过。 希望通过这个总结，让更多的人能够了解并使用这个超级好用的CSS3进度条。
1. jQuery彩色火焰背景的3D进度条插件
基于jQuery和CSS3的进度条插件种类繁多，非常复杂。 之前我们介绍过一些，比如超创意的CSS3客机跑道进度条动画，外观上很有创意，而且CSS3发光进度条动画还可以定制。 进度条的百分比。 明天我们将介绍另一个基于jQuery的带有彩色火焰背景的3D进度条插件。 它的背景就像燃烧的火焰，但也有多种颜色选择。 整体进度条看起来有3D立体视觉效果。
在线演示源码下载
2. CSS3发光进度条动画超炫风格
这次我们要分享一个特别耀眼的CSS3进度条动画，其风格类似于星球大战中这些利剑的疗效。 在页面初始化的时候，可以设置进度条的值，并且我们还可以借助其配套的借口动态改变进度条的值，使用起来更加方便。 另外，之前介绍过一个CSS33D进度条，其风格也类似。
在线演示源码下载
3.CSS3彩色进度条加载动画带进度比例
这次我要分享的也是加载动画，不过是一个进度条加载动画。 这款进度条应用的特点是进度条呈现出多彩的外观，并且进度条上方显示当前进度，非常实用。
在线演示源码下载
4.又一波15个超炫CSS3 Loading动画图标
明天我们将为大家分享一组炫丽的CSS3 Loading动画图标。 他们的共同特点就是非常个性化。
在线演示源码下载
5.CSS3超炫方形定时器进度条动画
明天给大家分享一个特别炫的CSS3方形定时器。 这个方形计时器还可以当进度条用，非常实用。 计时器由2个圆环组成，分别代表秒和分，随着时间的推移，这两个圆环会逐渐充满色调，并且每1秒的过程中就会有另一个圆环。 颜色填充。
在线演示源码下载
6.近20种HTML5环形进度条插件
明天分享的也是一个基于HTML5的圆形进度条插件。 总共有近20个款式css加载动画，非常实用。
在线演示源码下载
7.超创意CSS3客机跑道进度条动画
前几天css加载动画，我们分享了一个漂亮的CSS3彩色进度条加载动画，带进度比例，相当实用。 明天我们将继续给大家介绍一款非常有创意的CSS3客机跑道进度条动画。 它的进度动画就像一架客机在跑道上运行，整个进度条的形状也像客机跑道一样。 其实这只是形状上的区别。 进度条 还是那种进度条，实用性还是有的。
在线演示源码下载
8.超漂亮的jQuery和Bootstrap进度条插件
这是另一个非常漂亮的网页进度条插件，它基于jQuery脚本和Bootstrap风格，方法与之前分享的带有进度比例的CSS3彩色进度条加载动画类似，只是形状不同。 同样的进度条顶部还显示了数字比例，让你可以清楚地了解当前的进度。
在线演示源码下载
9. CSS33D响铃速率进度条形图
这是一个基于JavaScript和CSS3的3D环形比例进度条图，可以显示当前数据的比例。 与之前分享的HTML5SVG环形图应用相比，这款环形图应用的特点是：外观呈现出3D立体视觉效果，但实用性也不错。
在线演示源码下载
10.jQuery/CSS3彩色进度条插件动态比例提示
明天给大家分享一个非常实用的jQuery/CSS3彩色进度条插件。 进度条的UI风格更加美观，进度实心部分有发光动画效果。 另一个特点是，会动态提示进度率，让用户实时了解当前风暴的进度，但最后会提示进度完成情况。
在线演示源码下载
11. HTML5Canvas方形进度条显示数字比例
我记得分享过很多不同风格的进度条插件，有的基于jQuery，有的基于HTML5和CSS3。 这次我们将介绍另一个基于HTML5Canvas的方形进度条应用。 红色背景下，红色进度条变得越来越醒目，但方块中央会实时显示当前进度的数字比例，非常实用。
在线演示源码下载
发表评论