一个加载事件
开发工具与关键技术: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使其覆盖在加载页面的上面,造成一个看似将加载页面隐藏的效果。
撒花
完结。