登陆 注册

Jquery+CSS3实现访问网页预加载动画特效

陈双义 2018-05-03 141人围观 ,发现0个评论 JqueryCSS3 百度未收录

网站首页增加一个预加载动画,让用户首次访问网站的时候不会因为等待资源准备时间过长而感到枯燥。

CSS3的动画效果利用的是keyframes帧动画能力,可以理解为纯代码实现了界面的动画效果。

以前很多人会使用一个动态的图片作为预加载动画,效果很酷。

不过gif的图片相对而言会比较大一点,如果想展现更加优秀的动画效果,就需要精细的图片+更多的帧。

制作一个动态的gif本身并不困难,不太好的地方在于不能够随意更换以及自定义色彩。

因此,使用Jquery+CSS3+HTML一个新的方案来替代图片是一个比较好的解决方案。

本方案对于IE做了一定程度的兼容,但是IE9及更早版本动画可能动不起来。

文章底部贴出Jquery之家中别人定义的众多精彩的加载动画。

Jquery+CSS3实现访问网页预加载动画特效.jpg

检查是否引入Jquery

对于99%的网站而言,Jquery库都是引入过的,通过Chrome内核的浏览器,右击查看网站源代码。

Ctrl+F调出搜索框,输入Jquery,检查您的网站是否引入了Jquery库。

如果没有,个人不建议为了开场动画进行增加引入,那么本文也不需要继续往后读了。

定义preloading.css

由于CSS中的特效定义比较多,解释起来比较麻烦(又是旋转、偏移什么的)。

避免阅读混乱,此处只对关键的地方进行批注。

除了本方案外还可参考渐入渐出等等方案,参阅文章底部。

/* 全屏的加载底栏 */
#preloader-wrapper
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index:999999;
}
/*动画元素*/
#preloader
{
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;/* COLOR 1 */
-webkit-animation: spin 2s linear infinite; /* Chrome */
-ms-animation: spin 2s linear infinite; /* Chrome */
-moz-animation: spin 2s linear infinite; /* Chrome */
-o-animation: spin 2s linear infinite; /* Chrome */
animation: spin 2s linear infinite; /* IE 10+ */
z-index:1001;
}
/* 文字定义 */
#preloader-wrapper .load_title {
font-family: "Microsoft YaHei","SimHei","arial";
color:#FFF; font-size:19px; width:100%; text-align:center;
z-index:9999999999999; position:absolute; top:60%; opacity:1;
line-height:30px; }
/* 文字定义着重色 */
#preloader-wrapper .load_title span {
  font-weight:weight; font-size:24px; color:#00bdf2; opacity:1;
}
#preloader:before
{
content: "";
position: absolute;
top: 5px;
left: 5px;
rightright: 5px;
bottombottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;/* COLOR 2 */
-webkit-animation: spin 3s linear infinite; /* Chrome */
-moz-animation: spin 3s linear infinite; /* Chrome */
-o-animation: spin 3s linear infinite; /* Chrome */
-ms-animation: spin 3s linear infinite; /* Chrome */
animation: spin 3s linear infinite; /* IE 10+ */
}
#preloader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
rightright: 15px;
bottombottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;  /* COLOR 3 */
-moz-animation: spin 1.5s linear infinite; /* Chrome */
-o-animation: spin 1.5s linear infinite; /* Chrome */
-ms-animation: spin 1.5s linear infinite; /* Chrome */
-webkit-animation: spin 1.5s linear infinite; /* Chrome */
animation: spin 1.5s linear infinite; /* IE 10+ */
}
@-webkit-keyframes spin
{
0%{
-webkit-transform: rotate(0deg);  /* Chrome */
-ms-transform: rotate(0deg);  /* IE 9 */
transform: rotate(0deg);  /* IE 10+ */
}100%{
-webkit-transform: rotate(360deg);  /* Chrome */
-ms-transform: rotate(360deg);  /* IE 9 */
transform: rotate(360deg);  /* IE 10+ */}
}
@keyframes spin
{
0%{
-webkit-transform: rotate(0deg);  /* Chrome */
-ms-transform: rotate(0deg);  /* IE 9 */
transform: rotate(0deg);  /* IE 10+ */
}100%{
-webkit-transform: rotate(360deg);  /* Chrome */
-ms-transform: rotate(360deg);  /* IE 9 */
transform: rotate(360deg);  /* IE 10+ */}
}
/*结尾开门 */
#preloader-wrapper .preloader-section
{
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #3E5062; /* 这是底板色,可以修改 */
z-index: 1000;
-webkit-transform: translateX(0);  /* Chrome */
-ms-transform: translateX(0);  /* IE 9 */
transform: translateX(0);  /* IE 10+ */
}
#preloader-wrapper .preloader-section.section-left {left: 0;}
#preloader-wrapper .preloader-section.section-rightright {rightright: 0;}
/* 旋转元素 */
.loaded #preloader-wrapper .preloader-section.section-left
{
-webkit-transform: translateX(-100%);  /* Chrome */
-ms-transform: translateX(-100%);  /* IE 9 */
transform: translateX(-100%);  /* IE 10+ */
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
.loaded #preloader-wrapper .preloader-section.section-rightright {
-webkit-transform: translateX(100%);  /* Chrome */
-ms-transform: translateX(100%);  /* IE 9 */
transform: translateX(100%);  /* IE 10+ */
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
.loaded #preloader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}
.loaded #preloader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%);  /* Chrome */
-ms-transform: translateY(-100%);  /* IE 9 */
transform: translateY(-100%);  /* IE 10+ */
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
/* 浏览器不支持CSS3场景 */
.no-js #preloader-wrapper {display: none;}

引入CSS文件

放在head便签区域的最下方

<head>
...
<link rel="stylesheet" type="text/css" href="css/preloading.css">
</head>

定义动画元素

放在body区域最上方,对于WordPress而言一般是在主题的head.php中。

<body>
<div id="preloader-wrapper">
<div id="preloader"></div>
<div class="preloader-section section-left"></div>
<div class="preloader-section section-right"></div>
<div class="load_title">正在快速前往<br><span>陈双义博客</span></div>
</div>
<script type="text/javascript">
//确保Jquey已加载后执行进入
(function($){
//$(window).load 和 $(document).ready 都可以使用,具体差别以后再讲
$(document).ready(function(){
$('body').addClass('loaded');
$('#preloader-wrapper .load_title').remove();
});
})(jQuery);
</script>
...
</body>

更多动画特效+显隐效果源码演示与下载:

loaders.css-纯CSS3超酷Loading加载指示器特效

http://www.htmleaf.com/css3/css3donghua/201603213242.html

30种CSS3炫酷页面预加载loading动画特效

http://www.htmleaf.com/css3/css3donghua/201504151682.html

28种纯CSS3炫酷loading加载动画特效

http://www.htmleaf.com/css3/css3donghua/201503301596.html

CSS3波形loading动画特效

http://www.htmleaf.com/css3/css3donghua/201706224588.html

HTML5和CSS3炫酷彩色loading加载动画特效

http://www.htmleaf.com/css3/css3donghua/201707284654.html

6种CSS3炫酷预加载Loading指示器动画特效

http://www.htmleaf.com/css3/css3donghua/201606233640.html

12种纯CSS3 Loader加载指示器动画特效

http://www.htmleaf.com/css3/css3donghua/201611164199.html

尾声

所有的动画CSS特效代码都可以自行贴进来与界面元素贴合起来,总之万变不离其中。

还有利用JS工具库实现的加载动画,如SVG+Segment.js,感兴趣可以自行度娘哟。

本文标题:Jquery+CSS3实现访问网页预加载动画特效
本文链接:http://www.chenshuangyi.com/post/101.html
作者授权:除特别说明外,本文由 陈双义 原创编译并授权 陈双义博客 刊载发布。
版权声明:本文使用「署名-非商业性使用-相同方式共享」创作共享协议,转载或使用请遵守署名协议。协议见页脚-知识共享许可协议。
谢谢打赏
支付宝 支付宝
微信 微信
请发表您的评论
站点信息
  • 文章总数:198
  • 页面总数:9
  • 分类总数:11
  • 标签总数:276
  • 评论总数:71
  • 浏览总数:32250
扫描关注官方微信公众号
官方微信公众号
不容错过