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、查看效果。