CSS3 实现loading动画效果_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 08:46:37
Original
1156 Leute haben es durchsucht

前几篇介绍了CSS3的3个动画属性transform,transition,animation。但即使基本语法能看懂,也不代表能设计出棒棒的动画效果。在设计这条路上,是学无止境,甚至需要拼天赋的。我也很菜,只能站在优秀的设计师的肩膀上,模拟出一些效果。

参照网上的设计,本篇分享一下非常常见的Loading的效果。你可以点这里

例子1:菊花状的Loading效果

第一步画出静态的小菊花。

.sk-fading-circle {  width: 40px;  height: 40px;  position: relative;}.sk-fading-circle .sk-circle {  width: 100%;  height: 100%;  position: absolute;  left: 0;  top: 0;}.sk-fading-circle .sk-circle:before {  content: '';  display: block;  margin: 0 auto;  width: 15%;  height: 15%;  background-color: #333;  border-radius: 100%;}<div class="sk-fading-circle">  <div class="sk-circle"></div>  … //为缩减篇幅省略中间10个div  <div class="sk-circle"></div></div>
Nach dem Login kopieren

代码如上,静态小菊花其实是一个外层div里嵌套12个小div。小div通过 border-radius画成圆型,并通过margin: 0 auto;定位到顶格居中位置。由于12个小div都是absolute定位,因此都重叠在了一起。

第二步将12个重叠的圆分散开。

.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}.sk-fading-circle .sk-circle3 { transform: rotate(60deg);}… //节省篇幅,每个圆每隔30度递增旋转.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}<div class="sk-fading-circle">  <div class="sk-circle1 sk-circle"></div>  … //为缩减篇幅省略中间10个div  <div class="sk-circle12sk-circle"></div></div>
Nach dem Login kopieren

代码如上,用transform的rotate将各个圆点旋转,形成完整的菊花状。如果你对transform不熟的话,看下图,第二个圆点旋转30度的示意图,其余圆点的旋转自行脑补:

第三步通过animation控制opacity属性,让每个点淡进淡出

@-webkit-keyframes sk-circleFadeDelay {  0%, 39%, 100% { opacity: 0; }  40% { opacity: 1; }}@keyframes sk-circleFadeDelay {  0%, 39%, 100% { opacity: 0; }  40% { opacity: 1; } }.sk-fading-circle .sk-circle:before {  ……  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;}
Nach dem Login kopieren

这样每个点都在像信号灯一样同步地闪烁。

最后一步,给每个点设置animation-delay延时,以错开闪烁的时间,形成常见的菊花转转的效果

.sk-fading-circle .sk-circle2:before {animation-delay: -1.1s; }.sk-fading-circle .sk-circle3:before { animation-delay: -1s; }.sk-fading-circle .sk-circle4:before { animation-delay: -0.9s; }… //为缩减篇幅省略中间代码.sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; }
Nach dem Login kopieren

因为是12个圆点,每个圆点的闪烁间隔时间0.1s,因此第1个圆点没有animation-delay延时,立即闪烁。第二个圆点,从-1.1s开始闪烁(负数不理解的话,参考animation一文,意思是从该时间点开始启动,之前的动画效果不显示)。之后每个圆点均以0.1s递增的速度延迟。最终形成常见的菊花转转的Loading效果

例子2:ios版菊花Loading

明白了原理后,无非是在例子1的基础上,将圆点改成竖条,opacity半透明即可。你可以在例子页面自行查看源码

例子3:琴谱版Loading,效果点这里

第一步,画出静态琴谱,很简单无非是一个外层div,内嵌几个并排的div而已

.spinner {  height: 40px;}.spinner > div {  background-color: #333;  height: 100%;  width: 6px;  display: inline-block;}<div class="spinner">  <div></div>  … //你可以根据需求多加几个div  <div></div></div>
Nach dem Login kopieren

第二步,琴谱动起来

.spinner > div {  ……  animation: sk-stretchdelay 1.2s infinite ease-in-out;}@keyframes sk-stretchdelay {  0%, 40%, 100% { transform: scaleY(0.4); }    20% { transform: scaleY(1.0); }}
Nach dem Login kopieren

例1,2中用了transform的rotate实现旋转。例3用了transform的scaleY实现拉伸。

最后一步,设置延时,让每个琴键在不同时间内拉伸

.spinner .rect2 {  animation-delay: -1.1s; }.spinner .rect3 { animation-delay: -1.0s; }.spinner .rect4 { animation-delay: -0.9s; }.spinner .rect5 { animation-delay: -0.8s; }<div class="spinner">  <div class="rect1"></div>  … //为节省篇幅省略中间代码  <div class="rect5"></div></div>
Nach dem Login kopieren

每个琴键的拉伸间隔时间0.1s,因此第1个琴键没有animation-delay延时,立即拉伸。第二个琴键,从-1.1s开始闪烁。之后每个琴键均以0.1s递增的速度拉伸。和菊花Loading的原理是一样的,不赘述。

例子4:简书版Loading

明白了原理后,无非是在例子3的基础上,将琴键改成原点,改改颜色即可。你可以在例子页面自行查看源码

总结

更多的Loading例子,网上有很多优秀的例子,例如cssload。但Loading的动画效果最多只能算一盘餐前小点,你可以充分挖掘CSS3的动画属性的潜力,制作出更炫的效果。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!