HTML5 애니메이션 효과를 기다립니다

废话不多说了 废话不多说了, 直接给大家贴代码了, 具体代码如下所示 ：

 <div class = loading> <p> 100 <span> </span> </p> </div>

 *{마진 : 0; 패딩 : 0;}로드 {높이 : 100%; 너비 : 100%; 위치 : 고정; 배경 : RGBA (255,255,255,1); } .loading> p {위치 : 절대; 왼쪽; 왼쪽 : 0; 오른쪽 : 0; 상단 : 0; 하단 : 0; 마진 : 자동; 높이 : 160px; 너비 : 160px; 텍스트-정렬; 중심; 선-높이 : 160px; font-size : 30px; color :#f00;} : 0 2PX 3PX RGBA (102,197,37,0.8); 애니메이션 :로드 EASE 1S Infinite; 왼쪽 : 0; 상단 : 0;} @KeyFrames로드 {0%{transform : rotate (0DEG)} 100%{transfer : rotate (360deg)}}}

 <div class = loading> <p> <i> </i> <i> </i> <i> </i> <i> </i> <i> </i> </p> </ div>

 *{마진 : 0; 패딩 : 0;}로드 {높이 : 100%; 너비 : 100%; 위치 : 고정; 배경 : RGBA (255,255,255,0.95); } .loading> p {위치 : 절대; 왼쪽; 왼쪽 : 0; 오른쪽 : 0; 상단 : 0; 하단 : 0; 마진 : 자동; 높이 : 30px; 너비 : 120px; 왼쪽; 여백 : 0 5px; 너비 : 5px; 높이 : 30px; 배경 :#f00; 변환 : scaley (0.3); 애니메이션 : 1S를 쉽게로드합니다. } .loading> pi : nth-Child (2) {애니메이션-델리 : 0.1S;}. 로딩> pi : nth-Child (3) {Animation-Delay : 0.2S;}. 로딩> pi : nth-child (nth-Child) 4) {Animation-Delay : 0.3s;}. 로딩> pi : nth-Child (5) {Animation-Delay : 0.4s;} @keyframes로드 {0,40%, 100%{transform : scaley (0.3); } 20%{transform : scaley (1);}}

其实我想做的是加载进度条效果 其实我想做的是加载进度条效果, 但是假的进度条太烂 但是假的进度条太烂, 真的又没有特别好的办法, 判断图片这种总感觉比较漏。

这是代码, 有完美解决方案了解决。

 <cript> document.onreadyStateChange = function () {if (document.readystate == 'complete') {$ ( '. loading'). fadeout (); }} </script>

Html5 等待加载动画效果 等待加载动画效果, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的。在此也非常感谢大家对 vevb 武林网网站的支持！