多个图标动画特效
目录
首先通过@font-face加载字体文件。
先看效果
思路清晰,先写六个div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多个图标动画特效</title>
</head>
<body>
<div class="android icon">Android</div>
<div class="app icon">Apple</div>
<div class="page icon">Page</div>
<div class="show icon">Show</div>
<div class="victor icon">Victor</div>
</body>
</html>
然后在cssz中通过@font-face引入加载字体文件图标类文件
@font-face {
font-family: 'icon';
src: url('font/icons.ttf');
}
接下来通过字体16进制的unicode编码引入图标:
.icon{
display: inline-block;
margin-right: 33px;
}
.android::before{
content: "\e65f";
font-size: 66px;
font-family: 'icon';
}
.app::before{
content: "\e660";
font-size: 66px;
font-family: 'icon';
}
.page::before{
content: "\e64d";
font-size: 66px;
font-family: 'icon';
}
.show::before{
content: "\e647";
font-size: 66px;
font-family: 'icon';
}
.victor::before{
content: "\e648";
font-size: 66px;
font-family: 'icon';
}
效果为:
为每个div添加样式
.icon{
display: inline-block;
cursor: help; /*当鼠标放在图标上面鼠标的样式*/
width: 111px;
height: 111px;
font-size: 0px;
line-height: 100px;
border-radius: 50%; /*圆框*/
background:#000;
color: white;
text-align: center;
animation:move 1s; /*引入下面的动画,时间为1s*/
}
效果为:
完善动画:
@keyframes move{
from{
opacity: 0;
transform: translateY(100%);
}
to{
opacity: 1;
transform: translateY(0%);
}
}
效果为:
整齐一下全部的出现,总感觉差了一点东西;通过使用animation-delay属性给不同的图标设置延迟:
.android{
animation-delay: 0s;
}
.app{
animation-delay: .3s;
}
.page{
animation-delay: .6s;
}
.show{
animation-delay: 1.2s;
}
.victor{
animation-delay: 1.5s;
}
效果为
光这样还不够,通过设置贝塞尔(cubic-bezier)速度曲线来改变图标的移动速率。
在类.icon里面添加以下属性。
.icon{
animation-fill-mode: both;/*设置图标开始和结束的效果可见,防止图标闪现*/
animation: move 2s cubic-bezier(.86,.15,.18,.9);
}
效果为:
加载(Loading)动画 - 0.0
先看效果
先把上面的图分解一个不停旋转的圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加载(Loading)动画 - 0.0</title>
<style type="text/css">
body {
background: #6FE;
margin: 100px;
}
.load {
text-indent: -9999px;/*把文字干飞*/
position: relative;
width: 202px;
height: 202px;
box-shadow: inset 0 0 0 16px #fff;/*设置内阴影*/
border-radius: 50%;
}
</style>
</head>
<body>
<div class="load">Loading</div>
</body>
</html>
效果为:
用text-indent: -9999px;来隐藏文字,利用box-shadow来生成白色圆圈,优点是不会打乱div内部结构,利用border元素会引起元素的偏移。
通过伪元素::before给圆圈添加一个旋转矩形来遮挡半圆,达到视觉效果差,让人感觉是圆在旋转。
.load::before{
position: absolute;
content: '';
width: 101px;
height: 202px;
background: pink;
left: 101px;
}
效果
然后修改为圆形,跟背景色一样,就是变成半圆了。
border-radius: 0 202px 202px 0;
接下来修改半圆颜色为背景色
.load::before{
background: #6FE;
}
效果为:
接下来通过伪元素选择器::after添加一个更浅色的轨迹图,用白色调整透明度就行。
.load::after{
position: absolute;
content: '';
width: 202px;
height: 202px;
border-radius: 50%;
left: 0;
box-shadow: inset 0 0 0 15px rgba(255,255,255,.3);
}
效果为:
接下来制作动画让遮挡图旋转起来
@keyframes load-effect {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.load::before{
animation: load-effect 2s infinite; /*动画无限循坏*/
transform-origin: 0px 101px; /*设置旋转的点为圆心处*/
}
效果为:
“拖尾”Loading动画 - 1.0
先看效果:
这个主要利用linear-gradient线性渐变来设置的。html框架和上面的一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style type="text/css">
body{
background: #000;
margin: 100px;
}
.load{ }
.load::before{ }
.load::after{ }
</style>
</head>
<body>
<div class="load">Loading</div>
</body>
通过上面的渐变属性修改之前圆圈的的背景
.load{
text-indent: -9999px;
position: relative;
width: 202px;
height: 202px;
box-shadow: inset 0 0 0 20px rgba(255,255,255,.3);
border-radius: 50%;
background: linear-gradient(to left,#fff 11%,rgba(255,255,255,0)50%);
}
效果为:
接下来给圆添加一个1/4的半圆遮挡板
.load::before{
position: absolute;
content: '';
width: 50%;
height: 50%;
border-radius: 0 0 101px 0;
right: 0px;
bottom: 0px;
background-color: #fff;
}
接下来往里面添加after伪元素,绘制一个内部实心圆,将其他细节覆盖掉。
.load::after{
position: absolute;
background-color: #000;
width: 162px;
height: 162px;
content: '';
border-radius: 50%;
top:20px;
left: 20px;
}
添加动画
@keyframes load-effect {
0%{
transform: rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
.load{
animation: load-effect 2s infinite linear;
}
效果为:
三点唤醒Loading动画 - 2.0
话不多说,先看效果:
通过box-shadow属性制作三个不同大小的圆
注:1em = 16px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3帧动画</title>
<style type="text/css">
body{
background: #000;
}
.load{
font-size: 33px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -8888em;
box-shadow:
3em 2em 0 1.3em #FFF,
7em 2em 0 1em #FFF,
10em 2em 0 0.5em #FFF,
12em 2em 0 0em #FFF;
/* 设置四个不同半径圆的大小和距离 */
}
</style>
</head>
<body>
<div class="load">1900's 88 keys</div>
</body>
</html>
效果为;
直接添加动画
<style type="text/css">
body{
background: #000;
}
.load{
font-size: 33px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -8888em;
/* box-shadow: 3em 2em 0 1.3em #FFF,7em 2em 0 1em #FFF,10em 2em 0 0.5em #FFF,12em 2em 0 0em #FFF; */
/* 三个不同圆的大小和距离 */
animation: load-effect 0.99s infinite linear;
}
/* 设置动画 */
@keyframes load-effect {
0%{
box-shadow:
3em 2em 0 1em #FCC,
6em 2em 0 0.5em #9F9,
9em 2em 0 0 #CCF,
12em 2em 0 -0.5em #F7F;
}
25%{
box-shadow:
3em 2em 0 0.5em #FCC,
6em 2em 0 0 #9F9,
9em 2em 0 -0.5em #CCF,
12em 2em 0 1em #F7F;
}
50%{
box-shadow:
3em 2em 0 0 #FCC,
6em 2em 0 -0.5em #9F9,
9em 2em 0 1em #CCF,
12em 2em 0 0.5em #F7F;
}
75%{
box-shadow:
3em 2em 0 -0.5em #FCC,
6em 2em 0 1em #9F9,
9em 2em 0 0.5em #CCF,
12em 2em 0 0 #F7F;
}
100%{
box-shadow:
3em 2em 0 1em #FCC,
6em 2em 0 0.5em #9F9,
9em 2em 0 0 #CCF,
12em 2em 0 -0.5em #F7F;
}
}
</style>
效果为
同一行,不同列的大小变化都遵循:->1->0.5em->0->-0.5em->,负数消失。
多点Loading特效【终极版】 - 3.0
话不多说,先看效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆阵</title>
<style type="text/css">
body{
background: #AFE;
margin: 200px;
}
.load{
font-size: 33px;
width: 1em;
height: 1em;
border-radius: 50%;
text-indent: -8888em;
animation: load-effect .9s infinite linear;
}
@keyframes load-effect {
0%,
100% {
box-shadow:
0 -3em 0 .2em #FCC,
2em -2em 0 0 #FFB7DD,
3em 0 0 -.5em #FF88C2,
2em 2em 0 -.5em #F4A,
0 3em 0 -.5em #F08,
-2em 2em 0 -.5em #C10066,
-3em 0 0 -.5em #A20055,
-2em -2em 0 0 #8C0044;
}
12.5% {
box-shadow:
0 -3em 0 0 #FCC,
2em -2em 0 .2em #FFB7DD,
3em 0 0 0 #FF88C2,
2em 2em 0 -.5em #F4A,
0 3em 0 -.5em #F08,
-2em 2em 0 -.5em #C10066,
-3em 0 0 -.5em #A20055,
-2em -2em 0 -.5em #8C0044;
}
25% {
box-shadow:
0 -3em 0 -.5em #FCC,
2em -2em 0 0 #FFB7DD,
3em 0 0 .2em #FF88C2,
2em 2em 0 0 #F4A,
0 3em 0 -.5em #F08,
-2em 2em 0 -.5em #C10066,
-3em 0 0 -.5em #A20055,
-2em -2em 0 -.5em #8C0044;
}
37.5% {
box-shadow:
0 -3em 0 -.5em #FCC,
2em -2em 0 -.5em #FFB7DD,
3em 0 0 0 #FF88C2,
2em 2em 0 .2em #F4A,
0 3em 0 0 #F08,
-2em 2em 0 -.5em #C10066,
-3em 0 0 -.5em #A20055,
-2em -2em 0 -.5em #8C0044;
}
50% {
box-shadow:
0 -3em 0 -.5em #FCC,
2em -2em 0 -.5em #FFB7DD,
3em 0 0 -.5em #FF88C2,
2em 2em 0 0 #F4A,
0 3em 0 .2em #F08,
-2em 2em 0 0 #C10066,
-3em 0 0 -.5em #A20055,
-2em -2em 0 -.5em #8C0044;
}
62.5% {
box-shadow:
0 -3em 0 -.5em #FCC,
2em -2em 0 -.5em #FFB7DD,
3em 0 0 -.5em #FF88C2,
2em 2em 0 -.5em #F4A,
0 3em 0 0 #F08,
-2em 2em 0 .2em #C10066,
-3em 0 0 0 #A20055,
-2em -2em 0 -.5em #8C0044;
}
75% {
box-shadow:
0 -3em 0 -.5em #FCC,
2em -2em 0 -.5em #FFB7DD,
3em 0 0 -.5em #FF88C2,
2em 2em 0 -.5em #F4A,
0 3em 0 -.5em #F08,
-2em 2em 0 0 #C10066,
-3em 0 0 .2em #A20055,
-2em -2em 0 0 #8C0044;
}
87.5% {
box-shadow:
0 -3em 0 0 #FCC,
2em -2em 0 -.5em #FFB7DD,
3em 0 0 -.5em #FF88C2,
2em 2em 0 -.5em #F4A,
0 3em 0 -.5em #F08,
-2em 2em 0 0 #C10066,
-3em 0 0 0 #A20055,
-2em -2em 0 .2em #8C0044;
}
}
</style>
</head>
<body>
<div class="load">1900's 88 keys</div>
</body>
</html>