一款纯CSS文字loading加载动画,一共有6种效果,每一个字母都是独立的元素装载,有旋转、位移、渐隐等效果,样式等均可自由调整。
页面的head部分,需引入页面元素的样式文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,用了div的嵌套结构里放入多个span标签来装载文字,代码如下:
<div class="page">
<div class="page__demo">
<div class="demo">
<div class="cp-preloader cp-preloader_type1">
<span class="cp-preloader__letter" data-preloader="L">L</span>
<span class="cp-preloader__letter" data-preloader="O">O</span>
<span class="cp-preloader__letter" data-preloader="A">A</span>
<span class="cp-preloader__letter" data-preloader="D">D</span>
<span class="cp-preloader__letter" data-preloader="I">I</span>
<span class="cp-preloader__letter" data-preloader="N">N</span>
<span class="cp-preloader__letter" data-preloader="G">G</span>
</div>
</div>
<div class="demo">
<div class="cp-preloader cp-preloader_type2">
<span class="cp-preloader__letter" data-preloader="L">L</span>
<span class="cp-preloader__letter" data-preloader="O">O</span>
<span class="cp-preloader__letter" data-preloader="A">A</span>
<span class="cp-preloader__letter" data-preloader="D">D</span>
<span class="cp-preloader__letter" data-preloader="I">I</span>
<span class="cp-preloader__letter" data-preloader="N">N</span>
<span class="cp-preloader__letter" data-preloader="G">G</span>
</div>
</div>
<div class="demo">
<div class="cp-preloader cp-preloader_type3">
<span class="cp-preloader__letter" data-preloader="L">L</span>
<span class="cp-preloader__letter" data-preloader="O">O</span>
<span class="cp-preloader__letter" data-preloader="A">A</span>
<span class="cp-preloader__letter" data-preloader="D">D</span>
<span class="cp-preloader__letter" data-preloader="I">I</span>
<span class="cp-preloader__letter" data-preloader="N">N</span>
<span class="cp-preloader__letter" data-preloader="G">G</span>
</div>
</div>
<div class="demo">
<div class="cp-preloader cp-preloader_type4">
<span class="cp-preloader__letter" data-preloader="L">L</span>
<span class="cp-preloader__letter" data-preloader="O">O</span>
<span class="cp-preloader__letter" data-preloader="A">A</span>
<span class="cp-preloader__letter" data-preloader="D">D</span>
<span class="cp-preloader__letter" data-preloader="I">I</span>
<span class="cp-preloader__letter" data-preloader="N">N</span>
<span class="cp-preloader__letter" data-preloader="G">G</span>
</div>
</div>
<div class="demo">
<div class="cp-preloader cp-preloader_type5">
<span class="cp-preloader__letter" data-preloader="L">L</span>
<span class="cp-preloader__letter" data-preloader="O">O</span>
<span class="cp-preloader__letter" data-preloader="A">A</span>
<span class="cp-preloader__letter" data-preloader="D">D</span>
<span class="cp-preloader__letter" data-preloader="I">I</span>
<span class="cp-preloader__letter" data-preloader="N">N</span>
<span class="cp-preloader__letter" data-preloader="G">G</span>
</div>
</div>
<div class="demo">
<div class="cp-preloader cp-preloader_type6">
<span class="cp-preloader__letter" data-preloader="L">L</span>
<span class="cp-preloader__letter" data-preloader="O">O</span>
<span class="cp-preloader__letter" data-preloader="A">A</span>
<span class="cp-preloader__letter" data-preloader="D">D</span>
<span class="cp-preloader__letter" data-preloader="I">I</span>
<span class="cp-preloader__letter" data-preloader="N">N</span>
<span class="cp-preloader__letter" data-preloader="G">G</span>
</div>
</div>
</div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791