教大家写几个可能用得上的css3简单动画
2016-09-26 22:22
288 查看
例子1：菊花状的Loading效果
第一步画出静态的小菊花。
静态小菊花其实是一个外层div里嵌套12个小div。小div通过 border-radius画成圆型，并通过margin: 0 auto;定位到顶格居中位置。由于12个小div都是absolute定位，因此都重叠在了一起。
第二步将12个重叠的圆分散开。
用transform的rotate将各个圆点旋转，形成完整的菊花状。如果你对transform不熟的话，看下图，第二个圆点旋转30度的示意图，其余圆点的旋转自行脑补：
三步通过animation控制opacity属性，让每个点淡进淡出
这样每个点都在像信号灯一样同步地闪烁。
最后一步，给每个点设置animation-delay延时，以错开闪烁的时间，形成常见的菊花转转的效果
因为是12个圆点，每个圆点的闪烁间隔时间0.1s，因此第1个圆点没有animation-delay延时，立即闪烁。第二个圆点，从-1.1s开始闪烁（负数不理解的话，参考animation一文，意思是从该时间点开始启动，之前的动画效果不显示）。之后每个圆点均以0.1s递增的速度延迟。最终形成常见的菊花转转的Loading效果
例子2：ios版菊花Loading
明白了原理后，无非是在例子1的基础上，将圆点改成竖条，opacity半透明即可。
例子3：琴谱版Loading
第一步，画出静态琴谱，很简单无非是一个外层div，内嵌几个并排的div而已。
第二步，琴谱动起来
最后一步，设置延时，让每个琴键在不同时间内拉伸。
贴一段源码，直接复制去用吧
其他效果，代码很简单，看一次就懂了：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.loading{
width: 10px;
height: 10px;
margin: 0 auto;
}
.loading:after{
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "\2026";
}
@-webkit-keyframes ellipsis{
from{
width:2px;
}
to{
width: 15px;
}
}
.spinner {
width: 40px;
height: 40px;
/*border-radius: 50%;*/
background-color: #FFC952;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
0% {
-webkit-transform: perspective(120px)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
}
}
@keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
.sk-folding-cube {
margin: 20px auto;
width: 40px;
height: 40px;
position: relative;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #FFC952;
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
animation: sk-foldCubeAngle 2.4s infinite linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
0%,
10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
@keyframes sk-foldCubeAngle {
0%,
10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
</style>
<body>
<div class="loading"></div>
<div class="spinner"></div>
<div class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
</body>
</html>
第一步画出静态的小菊花。
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>静态小菊花其实是一个外层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>用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;
}这样每个点都在像信号灯一样同步地闪烁。
最后一步，给每个点设置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; }因为是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>第二步，琴谱动起来
.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); }
}例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>贴一段源码，直接复制去用吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css简单动画</title>
</head>
<style type="text/css">
.ani,.ani2{
width: 40px;
height: 40px;
position: relative;
margin: 50px auto;
}
.ani div{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.ani div:before{
content: "";
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background: cyan;
border-radius: 100%;
-webkit-animation: ani 1.2s infinite ease-in-out both;
}
.ani div:nth-child(1),.ani2 div:nth-child(1)
{-webkit-transform:rotate(30deg);}
.ani div:nth-child(2),.ani2 div:nth-child(2)
{-webkit-transform:rotate(60deg);}
.ani div:nth-child(3),.ani2 div:nth-child(3)
{-webkit-transform:rotate(90deg);}
.ani div:nth-child(4),.ani2 div:nth-child(4)
{-webkit-transform:rotate(120deg);}
.ani div:nth-child(5),.ani2 div:nth-child(5)
{-webkit-transform:rotate(150deg);}
.ani div:nth-child(6),.ani2 div:nth-child(6)
{-webkit-transform:rotate(180deg);}
.ani div:nth-child(7),.ani2 div:nth-child(7)
{-webkit-transform:rotate(210deg);}
.ani div:nth-child(8),.ani2 div:nth-child(8)
{-webkit-transform:rotate(240deg);}
.ani div:nth-child(9),.ani2 div:nth-child(9)
{-webkit-transform:rotate(270deg);}
.ani div:nth-child(10),.ani2 div:nth-child(10)
{-webkit-transform:rotate(300deg);}
.ani div:nth-child(11),.ani2 div:nth-child(11)
{-webkit-transform:rotate(330deg);}
.ani div:nth-child(12),.ani2 div:nth-child(12)
{-webkit-transform:rotate(360deg);}
@-webkit-keyframes ani {
0%,39%,100%{opacity: 0;}
40%{opacity: 1;}
}
.ani div:nth-child(1):before,.ani2 div:nth-child(1):before
{-webkit-animation-delay: -1.1s;}
.ani div:nth-child(2):before,.ani2 div:nth-child(2):before
{-webkit-animation-delay: -1.0s;}
.ani div:nth-child(3):before,.ani2 div:nth-child(3):before
{-webkit-animation-delay: -0.9s;}
.ani div:nth-child(4):before,.ani2 div:nth-child(4):before
{-webkit-animation-delay: -0.8s;}
.ani div:nth-child(5):before,.ani2 div:nth-child(5):before
{-webkit-animation-delay: -0.7s;}
.ani div:nth-child(6):before,.ani2 div:nth-child(6):before
{-webkit-animation-delay: -0.6s;}
.ani div:nth-child(7):before,.ani2 div:nth-child(7):before
{-webkit-animation-delay: -0.5s;}
.ani div:nth-child(8):before,.ani2 div:nth-child(8):before
{-webkit-animation-delay: -0.4s;}
.ani div:nth-child(9):before,.ani2 div:nth-child(9):before
{-webkit-animation-delay: -0.3s;}
.ani div:nth-child(10):before,.ani2 div:nth-child(10):before
{-webkit-animation-delay: -0.2s;}
.ani div:nth-child(11):before,.ani2 div:nth-child(11):before
{-webkit-animation-delay: -0.1s;}
.ani2 div{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.ani2 div:before{
content: "";
display: block;
margin: 0 auto;
width: 3px;
height: 15px;
background: orange;
border-radius: 100%;
-webkit-animation: ani 1.2s infinite ease-in-out both;
}
</style>
<body>
<div class="ani">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="ani2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>其他效果，代码很简单，看一次就懂了：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.loading{
width: 10px;
height: 10px;
margin: 0 auto;
}
.loading:after{
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "\2026";
}
@-webkit-keyframes ellipsis{
from{
width:2px;
}
to{
width: 15px;
}
}
.spinner {
width: 40px;
height: 40px;
/*border-radius: 50%;*/
background-color: #FFC952;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
0% {
-webkit-transform: perspective(120px)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
}
}
@keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
.sk-folding-cube {
margin: 20px auto;
width: 40px;
height: 40px;
position: relative;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #FFC952;
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
animation: sk-foldCubeAngle 2.4s infinite linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
0%,
10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
@keyframes sk-foldCubeAngle {
0%,
10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
</style>
<body>
<div class="loading"></div>
<div class="spinner"></div>
<div class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 教大家怎么采集火车头 简单有效 谨记 几个要点则可
- 利用css3属性：transition-duration来做简单的动画
- 一个简单的CSS3重复动画
- css3 动画(animation)-简单入门
- 设计高性能CSS3动画的几个要素
- CSS3transition实现的简单动画菜单
- 代码： CSS3动画，简单示例（鼠标移上去后，背景图片旋转）
- 简单CSS3动画
- Android基础-简单的动画实现 *补间动画 *透明度渐变 *旋转动画 *位移动画 *如果需要几个效果整合到一起，需要将所有效果全部放到set里
- 几个CSS3的flex弹性盒模型布局的简单例子演示
- 利用css3属性：transition-duration来做简单的动画
- 冒泡动画按钮的简单实现（使用CSS3）
- CSS3动画制作的简单示例
- css3简单动画之火箭快跑
- css3实现带有简单动画按钮导航
- 冒泡动画按钮的简单实现（使用CSS3）
- 一步一步用CSS3实现简单的Loading动画效果
- CSS3简单动画
- SASS使用CSS3动画并使动画暂停和停止在最后一帧的简单例子