css实现8中loadding加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现8中loadding加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <title></title> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <style> body { background: #000 !important; color: #FFF; } p { font-family: 'Montserrat Alternates', sans-serif; font-size: 18px; font-weight: 700; padding-bottom: 20px; color: #FFF; } .loader { width: 50px; height: 50px; display: inline-block; padding: 0px; opacity: 0.5; border: 3px solid #09acfd; -webkit-animation: loader 1s ease-in-out infinite alternate; animation: loader 1s ease-in-out infinite alternate; } .loader:before { content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 3px solid #09acfd; } .loader:after { content: " "; position: absolute; z-index: -1; top: 15px; left: 15px; right: 15px; bottom: 15px; border: 3px solid #09acfd; } @keyframes loader { from { transform: rotate(0deg) scale(1,1); border-radius: 0px; } to { transform: rotate(360deg) scale(0, 0); border-radius: 50px; } } @-webkit-keyframes loader { from { -webkit-transform: rotate(0deg) scale(1, 1); border-radius: 0px; } to { -webkit-transform: rotate(360deg) scale(0,0 ); border-radius: 50px; } } .loader1 { display: inline-block; font-size: 0px; padding: 0px; } .loader1 span { vertical-align: middle; border-radius: 100%; display: inline-block; width: 10px; height: 10px; margin: 3px 2px; -webkit-animation: loader1 0.8s linear infinite alternate; animation: loader1 0.8s linear infinite alternate; } .loader1 span:nth-child(1) { -webkit-animation-delay: -1s; animation-delay: -1s; background: rgba(245, 103, 115,0.6); } .loader1 span:nth-child(2) { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; background: rgba(245, 103, 115,0.8); } .loader1 span:nth-child(3) { -webkit-animation-delay: -0.26666s; animation-delay: -0.26666s; background: rgba(245, 103, 115,1); } .loader1 span:nth-child(4) { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; background: rgba(245, 103, 115,0.8); } .loader1 span:nth-child(5) { -webkit-animation-delay: -1s; animation-delay: -1s; background: rgba(245, 103, 115,0.4); } @keyframes loader1 { from { transform: scale(0, 0); } to { transform: scale(1, 1); } } @-webkit-keyframes loader1 { from { -webkit-transform: scale(0, 0); } to { -webkit-transform: scale(1, 1); } } .loader2 { width: 25px; height: 25px; display: inline-block; padding: 0px; border-radius: 100%; border: 5px solid; border-top-color: rgba(254, 168, 23, 0.65); border-bottom-color: rgba(57, 154, 219, 0.65); border-left-color: rgba(188, 84, 93, 0.95); border-right-color: rgba(137, 188, 79, 0.95); -webkit-animation: loader2 2s ease-in-out infinite alternate; animation: loader2 2s ease-in-out infinite alternate; } @keyframes loader2 { from { transform: rotate(0deg); } to { transform: rotate(720deg); } } @-webkit-keyframes loader2 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(720deg); } } .loader3 { width: 50px; height: 50px; display: inline-block; padding: 0px; text-align: left; } .loader3 span { position: absolute; display: inline-block; width: 50px; height: 50px; border-radius: 100%; background: rgba(135, 211, 124,1); -webkit-animation: loader3 1.5s linear infinite; animation: loader3 1.5s linear infinite; } .loader3 span:last-child { animation-delay: -0.9s; -webkit-animation-delay: -0.9s; } @keyframes loader3 { 0% { transform: scale(0, 0); opacity: 0.8; } 100% { transform: scale(1, 1); opacity: 0; } } @-webkit-keyframes loader3 { 0% { -webkit-transform: scale(0, 0); opacity: 0.8; } 100% { -webkit-transform: scale(1, 1); opacity: 0; } } .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); } } .loader5 { display: inline-block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #4183D7; border-top: 10px solid #F5AB35; -webkit-animation: loader5 1.2s ease-in-out infinite alternate; animation: loader5 1.2s ease-in-out infinite alternate; } @keyframes loader5 { from { transform: rotate(0deg); } to { transform: rotate(720deg); } } @-webkit-keyframes loader5 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(720deg); } } .loader6 { display: inline-block; width: 20px; height: 20px; border-left: 2px solid transparen.........完整代码请登录后点击上方下载按钮下载查看
网友评论0