加载事件

                   一个加载事件

开发工具与关键技术：DW    HTML   CSS    JS

作者：

撰写时间:2021.5.01；

下面我们来看一下如何在页面上加载动画，

首先我们在Html上写好基础样式，设置好基础后开始写Css，

 

这边先用<link>标签引入Css样式

 

这里就不在过多展示

 

页面加载完成时先让不必要的样式先隐藏起来，

 

加载完成首先我们可以看到大大滴广告出现在我们眼前；

 

右上角出现了一个开关灯按钮，我们点击它可以发现页面直接变成黑色；

 

然后再次点击可以发现颜色变回

 

 

 

 

左上角有个跳过广告的按钮，我们试着点击它跳过这该死的广告，

 

 

 

 

很遗憾，不能跳过这该死的广告，真正的跳过按钮其实在左边

点击左边按钮直接改变广告页面的display属性，将其隐藏，使加载页面的display属性变成block，展示出来，页面开始加载

 

当页面加载到100%时

 

使最后的页面显示出来，

 

-----------------------------下面是js部分-------------------------------------------------------

 

 

给它绑定一个id，获取到之后开始设置一个简单的倒计时

 

每隔一秒调用一次函数，让秒数减少一秒在页面上实时显示出来，当减少为0时使用

clearInterval清除这个函数。

 

延迟10秒之后开始自动调用左上角的点击事件，使加载页面显示出来隐藏这个广告页面

加载动画这里我用到的是Css3的动画效果，动画完成时间为8秒，

 

当加载到30%的时候改变进度条的width值；使其加载到完成；

然后使用 animation-fill-mode:forwards;语句使动画停留在完成阶段从而不会使页面加载完成之后width值变回0；

加载完成后延迟1秒，将最后的页面展示出来，因为懒得写所以使用了z-index使其覆盖在加载页面的上面，造成一个看似将加载页面隐藏的效果。

 

 

撒花

完结。