css3实现简易loading动画_html/css_WEB-ITnose
Jun 24, 2016 am 11:23 AM
css3已经火的不行，我还很淡（dan）定(teng)地在啃着css2,表示很惭愧啊
周末抽点时间看了下loading效果的实现，开始看到css3有点头大，感觉是不是向外面说的那样每一次标准的发布都像是在学习一门新语言呢，称有些惶恐。。。
说完废话了....开始show代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>loading动画实现</title></head><style type="text/css"> body{ text-align:center; } .container{ display: inline-block; } .point{ width:10px; height:10px; background:#2196F3; border-radius:50%; float:left; margin-left:5px; animation:myAnima 1.2s ease-in-out infinite; } .two{ animation-delay: 200ms; } .three{ animation-delay: 400ms; } @keyframes myAnima{ from {opacity: 0.8} to{opacity: 0} }</style><body><div class="container"> <div class="point one"></div> <div class="point two"></div> <div class="point three"></div> </div></body></html>效果图：
主要用到：css中的animation属性
animation 属性是一个简写属性，用于设置六个动画属性：
实现思路：
首先，我们需要三个点，这里通过定义三个正方形，并设置他的圆角为50%，来实现的。
然后，定义一个动画：myAnima(名字可以自定义，此处由于我太懒直接使用animation缩写来命名的)，里面定义了透明度从1到0，来实现元素显示和隐藏的效果。
最后，分别为第二、三个元素设置animation-delay(动画延迟)，是他们延迟执行，以达到loading中流动的效果
END..
Heißer Artikel
Hot-Tools-Tags
Heißer Artikel
Heiße Artikel -Tags
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?
Mar 04, 2025 pm 12:32 PM
Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Mar 17, 2025 pm 12:27 PM
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?
Mar 04, 2025 pm 02:39 PM
Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Was ist der Zweck des & lt; Meter & gt; Element?
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Mar 17, 2025 pm 12:20 PM
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Was ist der Zweck des & lt; datalist & gt; Element?
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Was ist der Zweck des & lt; Fortschritts & gt; Element?
