CSS动画实战：创建一个太极Loading图

这里主要是使用CSS的animation和伪类来构建，分析设定关键帧的执行顺序和时间段。

效果

动画分析

首先通过效果对动画执行进行一下分析：

边框的四条边进行按顺序动画加载。
矩形边框变为圆行边框。
太极图内部图案渐渐出现。
太极图旋转。
整个动画逆序执行。

针对上面的1效果是需要思考一下的，其他都比较容易实现。5效果只需设置属性animation-direction: alternate即可，整体动画加入animation-iteration-count: infinite来保证无限循环。

静态效果实现

首先将静态效果做出来。

html结构：

<div id="loader"><div class="logo"><div class="left"></div><div class="right"></div></div> <p>Loading...</p>
</div>

CSS（LESS）部分：

@border-width:2px;
@loader-width:150px;
@loader-insider-width:@loader-width * 0.15;
@animate-time:4s;*{margin: 0;padding: 0;border: 0;
}html, body{width: 100%;height: 100%;
}#loader{position: absolute;top: 0;left: 0;bottom: 0;right: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;p {padding: 1.5em;font-family: Arial;}.logo{width: @loader-width;height: @loader-width;position: relative;&:before{position: absolute;content: '';left: 0;top: 0;border-color: transparent;border-width: @border-width;border-style: solid;border-top-color: #000;border-right-color: #000;width: 100%;height: 100%;}&:after{position: absolute;content: '';bottom: -2 * @border-width;right: -2 * @border-width;border-color: transparent;border-width: @border-width;border-style: solid;border-bottom-color: #000;border-left-color: #000;width: 100%;height: 100%;}.left{position: absolute;width: 50%;height: 100%;top: @border-width;right: 50%;background-color: #000;border-top-left-radius: 100% 50%;border-bottom-left-radius: 100% 50%;&:before{position: absolute;content: '';width: 100%;height: 50%;bottom: 0;left: 50%;border-radius: 50%;background-color: #000;}&:after{position: absolute;content: '';width: @loader-insider-width;height: @loader-insider-width;background-color: #fff;bottom: ~'calc(25% - @{loader-insider-width} / 2)';left: ~'calc(100% - @{loader-insider-width} / 2)';border-radius: 50%;}      }.right{position: absolute;width: 50%;height: 100%;top: @border-width;left: 50%;border-top-right-radius: 100% 50%;border-bottom-right-radius: 100% 50%;&:before{position: absolute;content: '';width: 100%;height: 50%;top: 0;right: 50%;border-radius: 50%;background-color: #fff;}&:after{position: absolute;content: '';width: @loader-insider-width;height: @loader-insider-width;background-color: #000;top: ~'calc(25% - @{loader-insider-width} / 2)';right: ~'calc(100% - @{loader-insider-width} / 2)';border-radius: 50%;}    }  }
}

效果：

动画实现

上面已经把静态的效果实现了，现在将动画部分抽离出来。

动画关键帧时间段

根据效果，做如下时间段划分：

边框效果实现

将.logo的两个伪类的宽高设置为0，然后添加动画效果：

.logo{width: @loader-width;height: @loader-width;position: relative;animation: spin @animate-time infinite;animation-direction: alternate;animation-timing-function:ease;&:before{position: absolute;content: '';left: 0;top: 0;border-color: transparent;border-width: @border-width;border-style: solid;animation: line-before @animate-time infinite;animation-direction: alternate;}&:after{position: absolute;content: '';bottom: -2 * @border-width;right: -2 * @border-width;border-color: transparent;border-width: @border-width;border-style: solid;animation: line-after @animate-time infinite;animation-direction: alternate;}
}

keyframes:

@keyframes line-before {0% {width: 0;height: 0;border-top-color: #000;}9.9% {border-right-color: transparent;}10% {width: 100%;border-right-color: #000;border-top-color: #000;height: 0;}20%,100% {width: 100%;border-right-color: #000;border-top-color: #000;height: 100%;}40% {width: 100%;border-right-color: #000;border-top-color: #000;height: 100%;border-radius: 0;}//在执行到50%的时候变圆50%, 100% {width: 100%;border-right-color: #000;border-top-color: #000;height: 100%;border-radius: 50%;}
}@keyframes line-after {0%,19.9% {border-color: transparent;width: 0;height: 0;}20% {width: 0;height: 0;border-bottom-color: #000;}29.9% {border-left-color: transparent;}30% {width: 100%;border-left-color: #000;border-bottom-color: #000;height: 0;}40% {width: 100%;border-left-color: #000;border-bottom-color: #000;height: 100%;border-radius: 0;}//在执行到50%的时候变圆50%, 100% {border-radius: 50%;width: 100%;border-left-color: #000;border-bottom-color: #000;height: 100%;}
}

内部图案出现效果

这个直接调一下透明度即可：

@keyframes left-right-fade {0%, 50%{opacity: 0;}75%, 100% {opacity: 1;}
}

旋转效果

@keyframes spin {0%, 75%{transform:rotate(0deg);}90%, 100% {transform:rotate(360deg);}
}

所有样式代码

//author: 王乐平
//date: 2017.8.1
//blog: http://blog.csdn.net/lecepin@border-width:2px;
@loader-width:150px;
@loader-insider-width:@loader-width * 0.15;
@animate-time:4s;*{margin: 0;padding: 0;border: 0;
}html, body{width: 100%;height: 100%;
}#loader{position: absolute;top: 0;left: 0;bottom: 0;right: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;p {padding: 1.5em;font-family: Arial;}.logo{width: @loader-width;height: @loader-width;position: relative;animation: spin @animate-time infinite;animation-direction: alternate;animation-timing-function:ease;&:before{position: absolute;content: '';left: 0;top: 0;border-color: transparent;border-width: @border-width;border-style: solid;animation: line-before @animate-time infinite;animation-direction: alternate;}&:after{position: absolute;content: '';bottom: -2 * @border-width;right: -2 * @border-width;border-color: transparent;border-width: @border-width;border-style: solid;animation: line-after @animate-time infinite;animation-direction: alternate;}.left{position: absolute;width: 50%;height: 100%;top: @border-width;right: 50%;background-color: #000;border-top-left-radius: 100% 50%;border-bottom-left-radius: 100% 50%;animation: left-right-fade @animate-time infinite;animation-direction: alternate;&:before{position: absolute;content: '';width: 100%;height: 50%;bottom: 0;left: 50%;border-radius: 50%;background-color: #000;}&:after{position: absolute;content: '';width: @loader-insider-width;height: @loader-insider-width;background-color: #fff;bottom: ~'calc(25% - @{loader-insider-width} / 2)';left: ~'calc(100% - @{loader-insider-width} / 2)';border-radius: 50%;}      }.right{position: absolute;width: 50%;height: 100%;top: @border-width;left: 50%;border-top-right-radius: 100% 50%;border-bottom-right-radius: 100% 50%;animation: left-right-fade @animate-time infinite;animation-direction: alternate;&:before{position: absolute;content: '';width: 100%;height: 50%;top: 0;right: 50%;border-radius: 50%;background-color: #fff;}&:after{position: absolute;content: '';width: @loader-insider-width;height: @loader-insider-width;background-color: #000;top: ~'calc(25% - @{loader-insider-width} / 2)';right: ~'calc(100% - @{loader-insider-width} / 2)';border-radius: 50%;}    }  }
}@keyframes line-before {0% {width: 0;height: 0;border-top-color: #000;}9.9% {border-right-color: transparent;}10% {width: 100%;border-right-color: #000;border-top-color: #000;height: 0;}20%,100% {width: 100%;border-right-color: #000;border-top-color: #000;height: 100%;}40% {width: 100%;border-right-color: #000;border-top-color: #000;height: 100%;border-radius: 0;}50%, 100% {width: 100%;border-right-color: #000;border-top-color: #000;height: 100%;border-radius: 50%;}
}@keyframes line-after {0%,19.9% {border-color: transparent;width: 0;height: 0;}20% {width: 0;height: 0;border-bottom-color: #000;}29.9% {border-left-color: transparent;}30% {width: 100%;border-left-color: #000;border-bottom-color: #000;height: 0;}40% {width: 100%;border-left-color: #000;border-bottom-color: #000;height: 100%;border-radius: 0;}50%, 100% {border-radius: 50%;width: 100%;border-left-color: #000;border-bottom-color: #000;height: 100%;}
}@keyframes left-right-fade {0%, 50%{opacity: 0;}75%, 100% {opacity: 1;}
}@keyframes spin {0%, 75%{transform:rotate(0deg);}90%, 100% {transform:rotate(360deg);}
}

博客名称：王乐平博客

CSDN博客地址：http://blog.csdn.net/lecepin

本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

CSS动画实战：创建一个太极Loading图相关推荐

用css实现一个太极阴阳图，使用多个div块实现
用css实现一个太极阴阳图,使用多个div块实现下面是HTML代码 <!DOCTYPE html> <html lang="en"> <head&g ...
HQChart使用教程1- 如何快速创建一个K线图页面
快速创建一个K线图页面 HQChart介绍 demo页面代码 Option的配置项说明 Type Symbol IsAutoUpdate IsShowRightMenu IsShowCorssCurs ...
css 横线_CSS-画一个太极阴阳图
先来看一下最终展示接下来一步步实现它第一步写一个HTML文件,内容只需要一个<div>标签,给一个类为"taiji" <!DOCTYPE html> ...
倒计时css和js html代码,手把手教你利用CSS和JS创建一个倒数计时器
倒计时功能,在很多地方都会用到,我们平时都习惯去用一些插件来应用,会减少不少的工作量,并且效果也能达到预期. 我今天并不是想分享什么倒计时插件,而是自己写一个简单的倒数计时器,有兴趣的同学可以往下看看 ...
python画太极八卦图_用布尔运算绘制一个太极八卦图
布尔运算是UI设计中一个关键的知识点,今天,我们继续给不熟悉的朋友补补课. 教程来自P大点S的PJ胸,Pro_java,在这里,我们会用一个八卦图,再次带大家熟悉布尔运算,特别适合新手练习! 新建一个 ...
html八卦绘制,HTML+CSS实现画出一个太极八卦图案
太极八卦是中华文化的象征. 今天我就用了html+css画出来一个太极八卦的图案,喜欢的可以拿去研究下! 代码: 太极八卦作者无陌然qq2633544207 aide技术网aidezy.com /* ...
ps如何把自己的图与样机结合_教你如何自己创建一个ps贴图样机！
大家都知道,现在是一个贴图泛滥的时代,贴图样机会让自己的作品看着更加美观.可是有时候却苦于找不到合适的素材,那么今天,我就教大家如何创建一个简单的ps贴图样机,来应用到自己的作品. 设计素材:以上传 ...
html网页制作图案,HTML+CSS实现画出一个太极八卦图案
太极八卦是中华文化的象征. 今天我就用了html+css画出来一个太极八卦的图案,喜欢的可以拿去研究下! 代码: 太极八卦作者无陌然qq2633544207 aide技术网aidezy.com /* ...
用canvas画一个太极八卦图
首先是一个静态的八卦图: 这是状态图主要代码如下: 左半圆ctx.beginPath()ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5,true)ctx.fi ...