html+css3文字Loading动画特效
1、新建html文档。
2、书写html代码。
<低祝倘div id="load">
<div>G</div>
<救醒div>N</div>
<div>I</div>
<div>D</div>
<div>A</div>
<div>O</div>
<div>L</div>
</div>
3、书写css样式。薪码
<style>
body{background: #000;}
#load{position: absolute; width: 600px; height: 36px; left: 50%; top: 40%; margin-left: -300px; overflow: visible; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default;}
#load div{position: absolute; width: 20px; height: 36px; opacity: 0; font-family: Helvetica, Arial, sans-serif; animation: move 2s linear infinite; -o-animation: move 2s linear infinite; -moz-animation: move 2s linear infinite; -webkit-animation: move 2s linear infinite; transform: rotate(180deg); -o-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); color: #35C4F0;}
#load div:nth-child(2){animation-delay: 0.2s; -o-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s;}
#load div:nth-child(3){animation-delay: 0.4s; -o-animation-delay: 0.4s; -webkit-animation-delay: 0.4s; -webkit-animation-delay: 0.4s;}
#load div:nth-child(4){animation-delay: 0.6s; -o-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -webkit-animation-delay: 0.6s;}
#load div:nth-child(5){animation-delay: 0.8s; -o-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -webkit-animation-delay: 0.8s;}
#load div:nth-child(6){animation-delay: 1s; -o-animation-delay: 1s; -moz-animation-delay: 1s; -webkit-animation-delay: 1s;}
#load div:nth-child(7){animation-delay: 1.2s; -o-animation-delay: 1.2s; -moz-animation-delay: 1.2s; -webkit-animation-delay: 1.2s;} @keyframes move{0%{left:0; opacity:0;} 35%{left: 41%; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1;} 65%{left:59%; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1;} 100%{left:100%; -moz-transform:rotate(-180deg); -webkit-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0;}} @-moz-keyframes move{0%{left:0; opacity:0;} 35%{left:41%; -moz-transform:rotate(0deg); transform:rotate(0deg); opacity:1;} 65%{left:59%; -moz-transform:rotate(0deg); transform:rotate(0deg); opacity:1;} 100%{left:100%; -moz-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0;}} @-webkit-keyframes move{0%{left:0; opacity:0;} 35%{left:41%; -webkit-transform:rotate(0deg); transform:rotate(0deg); opacity:1;} 65%{left:59%; -webkit-transform:rotate(0deg); transform:rotate(0deg); opacity:1;} 100%{left:100%; -webkit-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0;}} @-o-keyframes move{0%{left:0; opacity:0;} 35%{left:41%; -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1;} 65%{left:59%; -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1;} 100%{left:100%; -o-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0;}}
</style>
4、整体代码结构。
5、查看效果。
