简要教程
这是一款超酷CSS3 loading加载动画特效。该loading动画使用CSS3CSS3 animation动画来制作,它代码简单,效果非常的炫酷。
使用方法
HTML结构
使用一个
<div class="loader"> <div class="loading-1"></div> <div class="loading-2">Loading...</div> </div>
CSS样式
该loading动画中使用了3个animation动画,第一个load动画是用于进度条从0运动到100%。第二个turn动画用于进度条在Y轴方向上旋转。第三个bounce动画用于文字的弹跳。
.loader { width: 150px; margin: 50px auto 70px; position: relative; } .loader .loading-1 { position: relative; width: 100%; height: 10px; border: 1px solid #69d2e7; border-radius: 10px; animation: turn 4s linear 1.75s infinite; } .loader .loading-1:before { content: ""; display: block; position: absolute; width: 0%; height: 100%; background: #69d2e7; box-shadow: 10px 0px 15px 0px #69d2e7; animation: load 2s linear infinite; } .loader .loading-2 { width: 100%; position: absolute; top: 10px; color: #69d2e7; font-size: 22px; text-align: center; animation: bounce 2s linear infinite; } @keyframes load { 0% { width: 0%; } 87.5%, 100% { width: 100%; } } @keyframes turn { 0% { transform: rotateY(0deg); } 6.25%, 50% { transform: rotateY(180deg); } 56.25%, 100% { transform: rotateY(360deg); } } @keyframes bounce { 0%,100% { top: 10px; } 12.5% { top: 30px; } }
以上就是超酷CSS3 loading加载动画特效的内容,更多相关内容请关注PHP中文网(www.php.cn)!