纯CSS3打造非常炫的加载动画

下载地址

代码非常简单。没有用任何javascript代码。纯css3实现。/* 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); }}

dd: