单纯使用CSS来实现预加载的动画效果代码讲解

来源：懂视网责编：小采时间：2020-11-27 18:50:12

单纯使用CSS来实现预加载的动画效果代码讲解

单纯使用CSS来实现预加载的动画效果代码讲解:本文给大家分享一段简单的代码实现css预加载动画效果，非常不错，具有参考借鉴价值，需要的的朋友参考下吧效果图<style> #loading { position:absolute; left:0; top:0; width:100%; height:100%; background: #121

推荐度：

点击下载本文 文档为doc格式

导读单纯使用CSS来实现预加载的动画效果代码讲解:本文给大家分享一段简单的代码实现css预加载动画效果，非常不错，具有参考借鉴价值，需要的的朋友参考下吧效果图<style> #loading { position:absolute; left:0; top:0; width:100%; height:100%; background: #121

本文给大家分享一段简单的代码实现css预加载动画效果，非常不错，具有参考借鉴价值，需要的的朋友参考下吧

效果图

QQ截图20170907093352.png

<style>
 #loading {
 position:absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 background: #121220;
 overflow:hidden;
 z-index:9999;
 }
 /*加载圈*/
 .spinner {
 margin:0 auto;
 width:60px;
 height:60px;
 position:relative;
 top:40%;
 }
 .container1 > p,.container2 > p,.container3 > p {
 width:15px;
 height:15px;
 background-color:#fff;
 border-radius:100%;
 position:absolute;
 -webkit-animation:bouncedelay 1.2s infinite ease-in-out;
 animation:bouncedelay 1.2s infinite ease-in-out;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 }
 .spinner .spinner-container {
 position:absolute;
 width:100%;
 height:100%;
 }
 .container2 {
 -webkit-transform:rotateZ(45deg);
 transform:rotateZ(45deg);
 }
 .container3 {
 -webkit-transform:rotateZ(90deg);
 transform:rotateZ(90deg);
 }
 .circle1 {
 top:0;
 left:0;
 }
 .circle2 {
 top:0;
 right:0;
 }
 .circle3 {
 right:0;
 bottom:0;
 }
 .circle4 {
 left:0;
 bottom:0;
 }
 .container2 .circle1 {
 -webkit-animation-delay:-1.1s;
 animation-delay:-1.1s;
 }
 .container3 .circle1 {
 -webkit-animation-delay:-1.0s;
 animation-delay:-1.0s;
 }
 .container1 .circle2 {
 -webkit-animation-delay:-0.9s;
 animation-delay:-0.9s;
 }
 .container2 .circle2 {
 -webkit-animation-delay:-0.8s;
 animation-delay:-0.8s;
 }
 .container3 .circle2 {
 -webkit-animation-delay:-0.7s;
 animation-delay:-0.7s;
 }
 .container1 .circle3 {
 -webkit-animation-delay:-0.6s;
 animation-delay:-0.6s;
 }
 .container2 .circle3 {
 -webkit-animation-delay:-0.5s;
 animation-delay:-0.5s;
 }
 .container3 .circle3 {
 -webkit-animation-delay:-0.4s;
 animation-delay:-0.4s;
 }
 .container1 .circle4 {
 -webkit-animation-delay:-0.3s;
 animation-delay:-0.3s;
 }
 .container2 .circle4 {
 -webkit-animation-delay:-0.2s;
 animation-delay:-0.2s;
 }
 .container3 .circle4 {
 -webkit-animation-delay:-0.1s;
 animation-delay:-0.1s;
 }
 @-webkit-keyframes bouncedelay {
 0%,80%,100% {
 -webkit-transform:scale(0.0)
 }
 40% {
 -webkit-transform:scale(1.0)
 }
 }
 @keyframes bouncedelay {
 0%,80%,100% {
 transform:scale(0.0);
 -webkit-transform:scale(0.0);
 }
 40% {
 transform:scale(1.0);
 -webkit-transform:scale(1.0);
 }
 }
</style>
<body>
 <p id="loading" >
 <p class="spinner">
 <p class="spinner-container container1">
 <p class="circle1"></p>
 <p class="circle2"></p>
 <p class="circle3"></p>
 <p class="circle4"></p>
 </p>
 <p class="spinner-container container2">
 <p class="circle1"></p>
 <p class="circle2"></p>
 <p class="circle3"></p>
 <p class="circle4"></p>
 </p>
 <p class="spinner-container container3">
 <p class="circle1"></p>
 <p class="circle2"></p>
 <p class="circle3"></p>
 <p class="circle4"></p>
 </p>
 </p>
 </p>
</body>

单纯使用CSS来实现预加载的动画效果代码讲解

推荐度：

点击下载本文 文档为doc格式

标签：加载动画实现

热门焦点

单纯使用CSS来实现预加载的动画效果代码讲解

单纯使用CSS来实现预加载的动画效果代码讲解

单纯使用CSS来实现预加载的动画效果代码讲解

最新推荐

猜你喜欢

热门推荐