Rumah > Artikel > hujung hadapan web > 使用纯css实现简单加载动画效果(代码实例)
本篇文章通过代码实例介绍一下使用纯css如何实现简单加载动画效果。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
【推荐教程:CSS视频教程】
看到目前很多网站的加载效果用的是 gif 图片,于是很好奇了,仅仅用 CSS 怎么实现呢?干货来袭,请接招。
难度系数
☆☆☆☆
效果图
思路
CSS 用于修饰 HTML,所以即便是再简单的效果,都是要依赖于 HTML 的,而本例效果的实现 HTML 布局更是重中之重。
先来分析动画效果组成:
综上,我们用以下步骤一步步解开加载效果的神秘面纱:
(1)用 HTML 实现沿某个点分布的相同线条,由它们组成一个圆形
(2)画一个小圆,添加背景色,并覆盖至线条圆心处
(3)添加渐变动画,使线条透明度发生变化
(4)通过给不同线条设置不同动画延迟,让线条动起来
HTML
<div id="container"> <div class="load-line rotate-0"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-30"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-60"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-90"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-120"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-150"> <span class="left"></span> <span class="right"></span> </div> <div id="circle-center"></div> </div>
解析:
CSS
#container, #circle-center { background: grey; } #container { position: relative; width: 600px; height: 300px; } #circle-center { position: absolute; top: 100px; left: 250px; width: 100px; height: 100px; border-radius: 100px; } .load-line { position: absolute; top: 150px; left: 200px; width: 200px; height: 13px; } .load-line > span { display: inline-block; width: 50%; height: 100%; border-radius: 20px; background: white; } .left { float: left; } .right { float: right; } .rotate-0 { transform: rotate(0); } .rotate-0 > .left { animation: load-effect 1.2s linear 0s infinite; } .rotate-0 > .right { animation: load-effect 1.2s linear 0.6s infinite; } .rotate-30 { transform: rotate(30deg); } .rotate-30 > .left { animation: load-effect 1.2s linear 0.1s infinite; } .rotate-30 > .right { animation: load-effect 1.2s linear 0.7s infinite; } .rotate-60 { transform: rotate(60deg); } .rotate-60 > .left { animation: load-effect 1.2s linear 0.2s infinite; } .rotate-60 > .right { animation: load-effect 1.2s linear 0.8s infinite; } .rotate-90 { transform: rotate(90deg); } .rotate-90 > .left { animation: load-effect 1.2s linear 0.3s infinite; } .rotate-90 > .right { animation: load-effect 1.2s linear 0.9s infinite; } .rotate-120 { transform: rotate(120deg); } .rotate-120 > .left { animation: load-effect 1.2s linear 0.4s infinite; } .rotate-120 > .right { animation: load-effect 1.2s linear 1.0s infinite; } .rotate-150 { transform: rotate(150deg); } .rotate-150 > .left { animation: load-effect 1.2s linear 0.5s infinite; } .rotate-150 > .right { animation: load-effect 1.2s linear 1.1s infinite; } @keyframes load-effect { 0% { opacity: 0; } 100% { opacity: 1; } }
解析:
更多编程相关知识,请访问:编程视频!!
Atas ialah kandungan terperinci 使用纯css实现简单加载动画效果(代码实例). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!