css3,环绕圆环 loading,小组件
一个loading的小组件, 给其他模块调用。先上图
type:cat
type:ball
第一幅loading，老鼠是一个圆形的背景图片，已经转成base64。 小猫也是图片 也已经转成base64.
老鼠的父div，一直在rotate。
小猫的眼珠，是不动的。动的是 小猫的眼球div，眼球div一直在rotate，眼珠是绝对定位在眼球的底部，这样眼球转起来的时候，给人的感觉就是眼珠再转。
第二幅loading的小球也是上面这个原理。
文字的动画，是用宽度，和透明度的变化来实现的。
源代码 css 代码是用less 编写的。并且这个type，涉及到模块化的一点东西。所以下面就贴出，2个loading的 dom和css。
第一幅的css
1 .loadingcat-wrap { 2 position: absolute; 3 left: 0px; 4 right: 0px; 5 top: 0px; 6 bottom: 0px; 7 z-index: 999; 8 background-color: rgba(0, 0, 0, 0.6); 9 box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3); 10 display: flex; 11 justify-content: center; 12 align-items: center; 13 flex-direction: column; 14 overflow: hidden; 15 } 16 .loadingcat-wrap .loadingcat { 17 width: 150px; 18 height: 150px; 19 border-radius: 150px; 20 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzJDRTM0ODM2REJEMTFFNkEwMTNBNzM3RTk3Nzk2RjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzJDRTM0ODQ2REJEMTFFNkEwMTNBNzM3RTk3Nzk2RjAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMkNFMzQ4MTZEQkQxMUU2QTAxM0E3MzdFOTc3OTZGMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMkNFMzQ4MjZEQkQxMUU2QTAxM0E3MzdFOTc3OTZGMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjtjnUMAAAskSURBVHja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); 21 position: relative; 22 display: flex; 23 justify-content: center; 24 align-items: center; 25 animation: catspin 3s linear infinite; 26 animation-play-state: running; 27 } 28 @keyframes catspin { 29 0% { 30 transform: rotate(1turn); 31 } 32 100% { 33 transform: rotate(0turn); 34 } 35 } 36 .loadingcat-wrap .cat { 37 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA2CAYAAACSjFpuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDBEMEQwRkE2REJEMTFFNkEwMTNBNzM3RTk3Nzk2RjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDBEMEQwRkI2REJEMTFFNkEwMTNBNzM3RTk3Nzk2RjAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MEQwRDBGODZEQkQxMUU2QTAxM0E3MzdFOTc3OTZGMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MEQwRDBGOTZEQkQxMUU2QTAxM0E3MzdFOTc3OTZGMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuDgtsEAAAwLSURBVHja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); 38 width: 56px; 39 height: 54px; 40 position: relative; 41 top: -100px; 42 } 43 .loadingcat-wrap .cat .eye { 44 width: 20px; 45 height: 20px; 46 border-radius: 20px; 47 position: absolute; 48 animation: scatpin 2s linear infinite; 49 animation-play-state: running; 50 } 51 @keyframes scatpin { 52 0% { 53 transform: rotate(1turn); 54 } 55 100% { 56 transform: rotate(0turn); 57 } 58 } 59 .loadingcat-wrap .cat .lefteye { 60 left: 5px; 61 top: 15px; 62 } 63 .loadingcat-wrap .cat .righteye { 64 left: 30px; 65 top: 15px; 66 } 67 .loadingcat-wrap .cat .ball { 68 width: 10px; 69 height: 10px; 70 position: absolute; 71 top: 9px; 72 left: 5px; 73 border-radius: 5px; 74 background-color: #818492; 75 } 76 .loadingcat-wrap .text { 77 color: #fff; 78 width: 120px; 79 } 80 .loadingcat-wrap .text p { 81 white-space: nowrap; 82 overflow: hidden; 83 width: 0px; 84 animation: textspin 3s ease-in-out infinite; 85 opacity: 0.7; 86 filter: alpha(opacity=70); 87 } 88 @keyframes textspin { 89 0% { 90 width: 0px; 91 opacity: 0.7; 92 filter: alpha(opacity=70); 93 } 94 50% { 95 width: 120px; 96 opacity: 0.7; 97 filter: alpha(opacity=70); 98 } 99 90% { 100 opacity: 0; 101 filter: alpha(opacity=0); 102 width: 120px; 103 } 104 100% { 105 opacity: 0; 106 filter: alpha(opacity=0); 107 width: 120px; 108 } 109 }
第一幅的dom
1 <div class="loadingcat-wrap"><!-- 2 @require "app/component/loading/loadingcat.less" 3 --> 4 <div class="loadingcat"> 5 </div> 6 <div class="cat"> 7 <div class="eye lefteye"> 8 <div class="ball"></div> 9 </div> 10 <div class="eye righteye"> 11 <div class="ball"></div> 12 </div> 13 </div> 14 <div class="text"> 15 <p>L O A D I N G . . .</p> 16 </div> 17 </div>
第二幅的css
1 .loading-wrap { 2 position: absolute; 3 left: 0px; 4 right: 0px; 5 top: 0px; 6 bottom: 0px; 7 z-index: 999; 8 background-color: rgba(0, 0, 0, 0.3); 9 box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3); 10 display: flex; 11 justify-content: center; 12 align-items: center; 13 flex-direction: column; 14 overflow: hidden; 15 } 16 .loading-wrap .loading { 17 width: 100px; 18 height: 100px; 19 border-radius: 100px; 20 background-color: transparent; 21 border: 1px solid #fff; 22 position: relative; 23 animation: spin 1s ease infinite; 24 animation-play-state: running; 25 } 26 .loading-wrap .loading .ball { 27 width: 20px; 28 height: 20px; 29 position: absolute; 30 border-radius: 10px; 31 } 32 .loading-wrap .loading .ball1 { 33 bottom: 0px; 34 left: 50%; 35 margin-left: -10px; 36 background-color: #FF6552; 37 } 38 @keyframes spin { 39 0% { 40 transform: rotate(0turn); 41 } 42 50% { 43 transform: rotate(0.5turn); 44 animation-timing-function: ease-in; 45 } 46 100% { 47 transform: rotate(1turn); 48 } 49 } 50 .loading-wrap .text { 51 margin-top: 60px; 52 color: #fff; 53 width: 120px; 54 } 55 .loading-wrap .text p { 56 white-space: nowrap; 57 overflow: hidden; 58 font-size: 13px; 59 width: 0px; 60 animation: textspin 3s ease-in-out infinite; 61 opacity: 0.7; 62 filter: alpha(opacity=70); 63 } 64 @keyframes textspin { 65 0% { 66 width: 0px; 67 opacity: 0.7; 68 filter: alpha(opacity=70); 69 } 70 50% { 71 width: 120px; 72 opacity: 0.7; 73 filter: alpha(opacity=70); 74 } 75 90% { 76 opacity: 0; 77 filter: alpha(opacity=0); 78 width: 120px; 79 } 80 100% { 81 opacity: 0; 82 filter: alpha(opacity=0); 83 width: 120px; 84 } 85 }
第二幅的dom
1 <div class="loading-wrap"><!-- 2 @require "app/component/loading/loading.less" 3 --> 4 <div class="loading"> 5 <div class="ball ball1"></div> 6 </div> 7 <div class="text"> 8 <p>L O A D I N G . . .</p> 9 </div> 10 </div>
以上。
