9种纯css3 loading圈加载动画效果下载
程序员文章站
2022-03-01 14:26:56
...
本Demo是一个loading页面加载的一个功能、图标都是通过css3代码来实现的、Demo里面一共包含9款不同loading效果、Demo引入了bootstrap.min.css和一个自定义的9种加载动画、相比我以前分享的css3加载动画特效选择性要多些、可以根据项目的需要选择不同的loading加载动画效果、效果图如下
以loader4为例HTML代码如下
<div class="col-md-6 text-center"> <p>loader 4</p> <div class="loader4"></div> </div>
CSS3代码如下
.loader4 { width:45px; height:45px; display:inline-block; padding:0px; border-radius:100%; border:5px solid; border-top-color:rgba(246, 36, 89, 1); border-bottom-color:rgba(0,0,0, 0.1); border-left-color:rgba(246, 36, 89, 1); border-right-color:rgba(0,0,0, 0.1); -webkit-animation: loader4 1s ease-in-out infinite; animation: loader4 1s ease-in-out infinite; } @keyframes loader4 { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } @-webkit-keyframes loader4 { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} }
源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1ntA7Om9 密码: 3ay8
上一篇: 别再用猪腰子补肾了吃多有害!
推荐阅读