动画是用 CSS3 做出来的，jQuery 的作用仅是用于当页面加载完毕后，隐藏加载动画。
1、HTML部分
添加到 body 标签的下方（可以是任意地方）
- <div id="circle-out"></div><div id="circle-in"></div>
2、CSS 部分，
- #circle-out {
- background-color: rgba(0, 0, 0, 0);
- border: 5px solid rgba(19, 160, 178, 0.85);
- opacity: .9;
- border-right: 5px solid rgba(0, 0, 0, 0);
- border-left: 5px solid rgba(0, 0, 0, 0);
- border-radius: 100%;
- -webkit-box-shadow: 0 0 35px rgba(19, 160, 178, 0.99);
- box-shadow: 0 0 35px rgba(19, 160, 178, 0.99);
- width: 66px;
- height: 66px;
- margin: 0 auto;
- position: fixed;
- left: 33px;
- bottom: 33px;
- -webkit-animation: circlecircle-out 1s infinite linear;
- animation: circlecircle-out 1s infinite linear;
- }
- #circle-in {
- background-color: rgba(0, 0, 0, 0);
- border: 5px solid rgba(19, 160, 178, 0.85);
- opacity: .9;
- border-left: 5px solid rgba(0, 0, 0, 0);
- border-right: 5px solid rgba(0, 0, 0, 0);
- border-radius: 100%;
- -webkit-box-shadow: 0 0 15px rgba(19, 160, 178, 0.99);
- box-shadow: 0 0 15px rgba(19, 160, 178, 0.99);
- width: 33px;
- height: 33px;
- margin: 0 auto;
- position: fixed;
- left: 50px;
- bottom: 50px;
- -webkit-animation: circlecircle-in 1s infinite linear;
- animation: circlecircle-in 1s infinite linear;
- }
- @-webkit-keyframes circlecircle-out {
- 0% {
- -webkit-transform: rotaterotate(160deg);
- opacity: 0;
- -webkit-box-shadow: 0 0 1px rgba(19, 160, 178, 0.99);
- box-shadow: 0 0 1px rgba(19, 160, 178, 0.99);
- }
- 50% {
- -webkit-transform: rotaterotate(145deg);
- opacity: 1;
- }
- 100% {
- -webkit-transform: rotaterotate(-320deg);
- opacity: 0;
- }
- }
- @keyframes circlecircle-out {
- 0% {
- -webkit-transform: rotaterotate(160deg);
- transform: rotaterotate(160deg);
- opacity: 0;
- -webkit-box-shadow: 0 0 1px rgba(19, 160, 178, 0.99);
- box-shadow: 0 0 1px rgba(19, 160, 178, 0.99);
- }
- 50% {
- -webkit-transform: rotaterotate(145deg);
- transform: rotaterotate(145deg);
- opacity: 1;
- }
- 100% {
- -webkit-transform: rotaterotate(-320deg);
- transform: rotaterotate(-320deg);
- opacity: 0;
- }
- }
- @-webkit-keyframes circlecircle-in {
- 0% {
- -webkit-transform: rotaterotate(0deg);
- }
- 100% {
- -webkit-transform: rotaterotate(360deg);
- }
- }
- @keyframes circlecircle-in {
- 0% {
- -webkit-transform: rotaterotate(0deg);
- transform: rotaterotate(0deg);
- }
- 100% {
- -webkit-transform: rotaterotate(360deg);
- transform: rotaterotate(360deg);
- }
- }
效果已经有了，查看 Demo 效果，但会发现，这动画一直在转，不符合要求啊。
加载嘛，加载完就该干嘛干嘛去对吧，所以还需要用到jQuery来达到加载完毕后隐藏该动画的效果。
1、首先引入 jQuery
- <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
2、添加 JS
- $(window).load(function() {
- $("#circle-out").fadeOut(500);
- $("#circle-in").fadeOut(700);
- });
代码的大概意思就是，当加载完毕后，就以 700 毫秒的过渡时间来逐渐隐藏当前动画。
如果不想用 jQuery 想直接用 JavaScript 来写的话。
2.1、JavaScript 写法：
- window.onload=function(){
- document.getElementById('circle-out').style.display="none";
- document.getElementById('circle-in').style.display="none";
- }
这个是最简单的写法，但是会发现有点奇怪，就是当页面加载完毕后，动画突然就消失，这消失的有点尴尬。
如果想要丰富的效果，建议给予这个加载动画添加一个类名，然后对这个类进行一系列的操作。
完毕！