1.页面淡入淡出 加载中... /*页面淡入淡出效果*/<br /> @-webkit-keyframes fadeIn {<br /> 0% {opacity: 0; /*初始状态 透明度为0*/}<br /> 50% {opacity: 0.5; /*中间状态 透明度为0*/}<br /> 100% {opacity: 1; /*结尾状态 透明度为1*/}<br /> } <p> body{ font-family:"微软雅黑"; background:#f0f0f0; height:100%;<br /> -webkit-animation-name: fadeIn; /*动画名称*/<br /> -webkit-animation-duration: 5s; /*动画持续时间*/<br /> -webkit-animation-iteration-count: 1; /*动画次数*/<br /> -webkit-animation-delay: 0s; /*延迟时间*/<br /> }<br /> 2.左右反转loading <br />#loading <br />{<br />z-index:-999;<br />background-color: #0098fc;<br />font-size:24px;<br />width:60px;<br />height:60px;<br />text-align:center;<br />position:absolute;<br />top:50%;<br />left:50%;<br />margin-top:-30px;<br />margin-left:-30px;<br />-webkit-animation: rotateplane 1.2s infinite ease-in-out;<br />animation: rotateplane 1.2s infinite ease-in-out;<br />}<br />@-webkit-keyframes rotateplane {<br />0%{ -webkit-transform: perspective(120px) }<br />50%{ -webkit-transform: perspective(120px) rotateY(180deg) }<br />100%{ -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }<br />}<br /> <br />@keyframes rotateplane {<br />0% {<br />transform: perspective(120px) rotateX(0deg) rotateY(0deg);<br />-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)<br />} 50% {<br />transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);<br />-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)<br />} 100% {<br />transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);<br />-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);<br />}<br />}<br /> 转自其他文章:css3 loading http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html Loading 动画效果一 HTML 代码： 1 2 3 4 5 6 7 class="spinner"> class="rect1"> class="rect2"> class="rect3"> class="rect4"> class="rect5"> CSS 代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 .spinner { margin: 100px auto; width: 50px; height: 60px; text-align: center; font-size: 10px; } .spinner > div { background-color: #67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } } Loading 动画效果二 HTML 代码： 1 class="spinner"> CSS 代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 .spinner { width: 60px; height: 60px; background-color: #67CF22; margin: 100px auto; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } Loading 动画效果三 HTML 代码： 1 2 3 4 class="spinner"> class="double-bounce1"> class="double-bounce2"> CSS 代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 .spinner { width: 60px; height: 60px; position: relative; margin: 100px auto; } .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; } .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } Loading 动画效果四 HTML 代码： 1 2 3 4 "spinner"> "cube1"> "cube2"> CSS 代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 .spinner { margin: 100px auto; width: 32px; height: 32px; position: relative; } .cube1, .cube2 { background-color: #67CF22; width: 30px; height: 30px; position: absolute; top: 0; left: 0; -webkit-animation: cubemove 1.8s infinite ease-in-out; animation: cubemove 1.8s infinite ease-in-out; } .cube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes cubemove { 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 100% { -webkit-transform: rotate(-360deg) } } @keyframes cubemove { 25% { transform: translateX(42px) rotate(-90deg) scale(0.5); -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); } 50% { transform: translateX(42px) translateY(42px) rotate(-179deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1% { transform: translateX(42px) translateY(42px) rotate(-180deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 75% { transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } } Loading 动画效果五 HTML 代码： 1 2 3 4 "spinner"> "dot1"> "dot2"> CSS 代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 .spinner { margin: 100px auto; width: 90px; height: 90px; position: relative; text-align: center; -webkit-animation: rotate 2.0s infinite linear; animation: rotate 2.0s infinite linear; } .dot1, .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #67CF22; border-radius: 100%; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .dot2 { top: auto; bottom: 0px; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }} @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } Loading 动画效果六 &nb
