首页 > 代码库 > 纯CSS3打造非常炫的加载动画
纯CSS3打造非常炫的加载动画
纯css3打造的一款非常炫的加载图。用在需要一定时间加载的地方非常合适。先上效果图：
点击这里在线预览
代码非常简单。没有用任何javascript代码。纯css3实现。
html代码：
<div class="content"> <div style="width: 970px; margin: auto"> </div> <div class="rotate"> <span class="triangle base"></span><span class="triangle no1"></span><span class="triangle no2"> </span><span class="triangle no3"></span> </div> </div>
css代码：
body { padding:0; margin:0; background-color: #2a4e66; overflow: hidden;}.content { width:100%; height:100%; top:0; right:0; bottom:0; left:0; position:absolute;}.rotate { position: absolute; top: 50%; left: 50%; margin: -93px 0 0 -93px; background: transparent; width: 186px; height: 186px; border-radius: 50%; z-index: 20;}.rotate:after { content: ‘‘; position: absolute; box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; width: 186px; height: 186px; border-radius: 50%; z-index: 10;}span.triangle.base { position: absolute; width: 0; height: 0; margin: 46px 0 0 13px; border-left: 80px solid transparent; border-right: 80px solid transparent; border-top: 140px solid #eeeeee; transform-origin: 50% 50%; z-index: 20;}span.triangle.no1 { position: absolute; margin: 46px 0 0 13px; width: 0; height: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 140px solid #eeeeee; transform-origin: 0 100%; z-index: 20;}span.triangle.no2 { position: absolute; margin: 46px 0 0 13px; width: 0; height: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 140px solid #eeeeee; transform-origin: 100% 100%; z-index: 20;}span.triangle.no3 { position: absolute; margin: 46px 0 0 13px; width: 0; height: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 140px solid #eeeeee; transform-origin: 50% 100%; z-index: 20;}/* Animation */.rotate { -webkit-animation: rotateTriangle 3s linear infinite; animation: rotateTriangle 3s linear infinite;}@-webkit-keyframes rotateTriangle { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(60deg); }}@keyframes rotateTriangle { from { transform: rotate(0deg); } to { transform: rotate(60deg); }}.rotate:after { -webkit-animation: glowAnimation 3s ease infinite; animation: glowAnimation 3s ease infinite;}@-webkit-keyframes glowAnimation { 0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; } 10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; } 100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }}@keyframes glowAnimation { 0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; } 10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; } 100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }}span.triangle.base { -webkit-animation: scaleTriangleBase 3s linear infinite; animation: scaleTriangleBase 3s linear infinite;}@-webkit-keyframes scaleTriangleBase { from { -webkit-transform: translate(0px,-11px) scale(0.5); } to { -webkit-transform: translate(0px,0px) scale(1); } }@keyframes scaleTriangleBase { from { transform: translate(0px,-11px) scale(0.5); } to { transform: translate(0px,0px) scale(1); }}span.triangle.no1 { -webkit-animation: scaleTriangleOne 3s linear infinite; animation: scaleTriangleOne 3s linear infinite;}@-webkit-keyframes scaleTriangleOne { from { -webkit-transform: translate(0px,-46px) scale(0.5); } to { -webkit-transform: translate(-80px,0px) scale(0); }}@keyframes scaleTriangleOne { from { transform: translate(0px,-46px) scale(0.5); } to { transform: translate(-80px,0px) scale(0); }}span.triangle.no2 { -webkit-animation: scaleTriangleTwo 3s linear infinite; animation: scaleTriangleTwo 3s linear infinite;}@-webkit-keyframes scaleTriangleTwo { from { -webkit-transform: translate(0px,-46px) scale(0.5); } to { -webkit-transform: translate(80px,0px) scale(0); }}@keyframes scaleTriangleTwo { from { transform: translate(0px,-46px) scale(0.5); } to { transform: translate(80px,0px) scale(0); }}span.triangle.no3 { -webkit-animation: scaleTriangleThree 3s linear infinite; animation: scaleTriangleThree 3s linear infinite;}@-webkit-keyframes scaleTriangleThree { from { -webkit-transform: translate(0px,-116px) scale(0.5); } to { -webkit-transform: translate(0px,-280px) scale(0); }}@keyframes scaleTriangleThree { from { transform: translate(0px,-116px) scale(0.5); } to { transform: translate(0px,-280px) scale(0); }}
转载请注明来源地址：http://www.cnblogs.com/liaohuolin/p/3911528.html
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。