知向前端
首页
微语
登录
前端页面初始化动画 loading 的几种效果
2020-4-17 Jon
前端开发时页面初始化如果不做处理会显示空白，这样用户体验就会比较差，如果替换成加载的动画，这样不仅好看，还能提升用户体验，下面就记录几种常用的页面首屏加载动画效果，都是纯css
彩条转圈 loading 动画
<!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <title>彩条转圈 loading 动画</title><br /> <style>@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-moz-keyframes spin{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.spinner{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1003;background: #000000;overflow:hidden} .spinner .blob:first-child{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;box-shadow:0 3px 3px 0 rgba(255,56,106,1);transform:translate3d(0,0,0);animation:spin 2s linear infinite} .spinner .blob:first-child:after,.spinner .blob:first-child:before{content:'';position:absolute;border-radius:50%} .spinner .blob:first-child:before{top:5px;left:5px;right:5px;bottom:5px;box-shadow:0 3px 3px 0 rgb(255, 228, 32);-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite} .spinner .blob:first-child:after{top:15px;left:15px;right:15px;bottom:15px;box-shadow:0 3px 3px 0 rgba(61, 175, 255,1);animation:spin 1.5s linear infinite}</style><br /> </head><br /> <body><br /> <div class="spinner"><br /> <div class="blob blob-0"></div><br /> <div class="blob blob-1"></div><br /> <div class="blob blob-2"></div><br /> <div class="blob blob-3"></div><br /> <div class="blob blob-4"></div><br /> <div class="blob blob-5"></div><br /> </div><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
点点点平滑过渡 loading 动画
<!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <title>点点点平滑过渡 loading 动画</title><br /> <style type="text/css"><br /> /* 初始动画 */<br /> .preloader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;background: #49a9ee; /*#ee6736*/;z-index: 9999;transition: opacity .65s}<br /> .preloader-hidden-add {opacity: 1;display: block}<br /> .preloader-hidden-add-active {opacity: 0}<br /> .preloader-hidden {display: none}<br /> .cs-loader {position: absolute;top: 0;left: 0;height: 100%;width: 100%}<br /> .cs-loader-inner {transform: translateY(-50%);top: 50%;position: absolute;width: 100%;color: #fff;text-align: center}<br /> .cs-loader-inner label {font-size: 20px;opacity: 0;display: inline-block}<br /> @keyframes lol {0% {opacity: 0;transform: translateX(-300px)}33% {opacity: 1;transform: translateX(0)}66% {opacity: 1;transform: translateX(0)}100% {opacity: 0;transform: translateX(300px)}}<br /> .cs-loader-inner label:nth-child(6) {animation: lol 3s infinite ease-in-out}<br /> .cs-loader-inner label:nth-child(5) {animation: lol 3s .1s infinite ease-in-out}<br /> .cs-loader-inner label:nth-child(4) {animation: lol 3s .2s infinite ease-in-out}<br /> .cs-loader-inner label:nth-child(3) {animation: lol 3s .3s infinite ease-in-out}<br /> .cs-loader-inner label:nth-child(2) {animation: lol 3s .4s infinite ease-in-out}<br /> .cs-loader-inner label:nth-child(1) {animation: lol 3s .5s infinite ease-in-out}<br /> </style><br /> </head><br /> <body><br /> <div class="preloader"><br /> <div class="cs-loader"><br /> <div class="cs-loader-inner"><br /> <label> ●</label><br /> <label> ●</label><br /> <label> ●</label><br /> <label> ●</label><br /> <label> ●</label><br /> <label> ●</label><br /> </div><br /> </div><br /> </div><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
字符跳动 loading 动画
<!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <title>字符跳动 loading 动画</title><br /> <style><br /> @import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap");<br /> .preloader-box {position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;background: #ed6c1f;z-index: 9999;transition: opacity .65s;display: flex;height: 100vh;justify-content: center;align-items: center;text-align: center;}<br /> .preloader {display: flex;color: white;font-size: 5em;font-family: "Baloo Bhaijaan", "initial";/* text-transform: uppercase; */}<br /> .preloader .inner {text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px transparent, 0 7px transparent, 0 8px transparent, 0 9px transparent, 0 10px 10px rgba(0, 0, 0, 0.4);transform: translateY(20px);margin-left: 2px;margin-right: 2px;}<br /> .preloader .inner:nth-child(1) {animation: prebounce 0.3s infinite alternate;}<br /> .preloader .inner:nth-child(2) {animation: prebounce 0.3s .1s infinite alternate;}<br /> .preloader .inner:nth-child(3) {animation: prebounce 0.3s .2s infinite alternate;}<br /> .preloader .inner:nth-child(4) {animation: prebounce 0.3s .3s infinite alternate;}<br /> @keyframes prebounce {to {text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px #bbb, 0 7px #bbb, 0 8px #bbb, 0 9px #bbb, 0 50px 25px rgba(0, 0, 0, 0.2); transform: translateY(-20px);}}<br /> </style><br /> </head><br /> <body><br /> <div class="preloader-box"><br /> <div class="preloader"><br /> <span class="inner">Z</span><br /> <span class="inner">X</span><br /> <span class="inner">Q</span><br /> <span class="inner">D</span><br /> </div><br /> </div><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
移动端圆形 loading 动画
<!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <title>移动端圆形 loading 动画</title><br /> <style><br /> .spinner {width: 60px;height: 60px;position: relative;margin: 100px auto;}<br /> .double-bounce1, .double-bounce2 {width: 100%;height: 100%;border-radius: 50%;background-color: #67CF22;opacity: 0.6;position: absolute;top: 0;left: 0;-webkit-animation: bounce 2.0s infinite ease-in-out;animation: bounce 2.0s infinite ease-in-out;}<br /> .double-bounce2 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}<br /> @-webkit-keyframes bounce {0%, 100% { -webkit-transform: scale(0.0) }50% { -webkit-transform: scale(1.0) }}<br /> @keyframes bounce {0%, 100% {transform: scale(0.0); -webkit-transform: scale(0.0);} 50% {transform: scale(1.0); -webkit-transform: scale(1.0);}}<br /> </style><br /> </head><br /> <body><br /> <div class="spinner"><br /> <div class="double-bounce1"></div><br /> <div class="double-bounce2"></div><br /> </div><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
移动端矩形 loading 动画
<!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <title>移动端矩形 loading 动画 2</title><br /> <style><br /> .spinner {position: absolute;top: 50%;left: 50%;margin-left: -25px;margin-top: -30px;width: 50px;height: 60px;text-align: center;font-size: 10px;}<br /> .spinner > .double {background: #49a9ee;height: 100%;width: 6px;display: inline-block;-webkit-animation: stretchDelay 1.2s infinite ease-in-out;animation: stretchDelay 1.2s infinite ease-in-out;}<br /> .spinner .rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}<br /> .spinner .rect3 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}<br /> .spinner .rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}<br /> .spinner .rect5 {-webkit-animation-delay: -0.8s;animation-delay: -0.8s;}<br /> @-webkit-keyframes stretchDelay {0%, 40%, 100% {-webkit-transform: scaleY(0.4)}20% {-webkit-transform: scaleY(1.0)}}<br /> @keyframes stretchDelay {0%, 40%, 100% {transform: scaleY(0.4); -webkit-transform: scaleY(0.4);}20% {transform: scaleY(1.0); -webkit-transform: scaleY(1.0);}}<br /> </style><br /> </head><br /> <body><br /> <div class="spinner"><br /> <div class="double rect1"></div><br /> <div class="double rect2"></div><br /> <div class="double rect3"></div><br /> <div class="double rect4"></div><br /> <div class="double rect5"></div><br /> </div><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
发表评论：
昵称
邮件地址 (选填)
个人主页 (选填)
内容