一、HTML
<span class="home icon">Home</span>
<span class="search icon">Search</span>
<span class="user icon">User</span>
<span class="mail icon">Mail</span>
<span class="chat icon">Chat</span>
二、CSS
@font-face {
font-family: 'icon-font';
src: url('font/flat-ui-icons-regular.ttf'), url('font/flat-ui-icons-regular.eot'),
url('font/flat-ui-icons-regular.woff'), url('font/flat-ui-icons-regular.svg');
}
.icon{
/*使span中的文字不显示*/
font-size:0px;
cursor: pointer;
display:inline-block;
position:relative;
width:100px;
height:100px;
/*显示圆形背景*/
border-radius:50%;
background:#FFF;
margin-right:20px;
/*显示圆形背景*/
-webkit-animation:move 1s cubic-bezier(.62,-0.91,.45,1.97);
animation:move 1s cubic-bezier(.62,-0.91,.45,1.97);
/*动画完成后元素保留第一帧的状态*/
/*因为最后一帧为直接不透明且,动画开始后直接透明,导致图片闪现*/
/*通过设置animation-fill-mode:both;或backwards解决,使最后动画恢复第一帧状态*/
-webkit-animation-fill-mode: both;/*backwards*/
animation-fill-mode: both;
}
.icon::before{
content:"\e609";
font-family: 'icon-font';
/*不能让辅助设备读取*/
speak: none;
font-size:50px;
text-align:center;
display:block;
box-sizing:border-box;
line-height:100px;
color:#8b8ab3;
}
/*每张图标依次出现*/
.home{
-webkit-animation-delay:0s;
animation-delay:0s;
}
.search{
-webkit-animation-delay:.1s;
animation-delay:.1s;
}
.user{
-webkit-animation-delay:.2s;
animation-delay:.2s;
}
.mail{
-webkit-animation-delay:.3s;
animation-delay:.3s;
}
.chat{
-webkit-animation-delay:.4s;
animation-delay:.4s;
}
/*图标*/
.home::before{
content:"\e62e";
}
.search::before{
content:"\e630";
}
.user::before{
content:"\e631";
}
.mail::before{
content:"\e632";
}
.chat::before{
content:"\e62d";
}
/*图标从下至上运动*/
@-webkit-keyframes move {
from {
opacity:0;
-webkit-transform: translateY(100%);
}
to {
opacity:1;
-webkit-transform: translateY(0%);
}
}
@keyframes move {
from {
opacity:0;
transform: translateY(100%);
}
to {
opacity:1;
transform: translateY(0%);
}
}