css3

来源：互联网发布：淘宝网纯棉床罩四件套编辑：程序博客网时间：2024/06/10 02:54

在线演示（刚开始打开效果不明显，刷新一下）

这里写图片描述

初始状态使图标初始位置向下偏移-100%，然后再向上移动到初始位置，在此过程中同时使图标同步变化，由完全透明变化为完全不透明。

html:

<div class="box">  <i class="fa fa-home fa-4x"></i></div><div class="box">  <i class="fa fa-search fa-4x"></i></div><div class="box">  <i class="fa fa-qq fa-4x"></i></div><div class="box">  <i class="fa fa-envelope-o fa-4x"></i></div>

css：

body {background-color: pink;}.box {  cursor: pointer;  display: inline-block;  width: 100px;  height: 100px;  border-radius: 50%;  background-color: #96CEB4;  position: relative;  margin-right: 20px;  -webkit-animation: move 1s; /*使用动画*/  animation: move 1s;}i {  color: #FFEEAD;  font-size: 48px;  position: absolute;  top: 16%;  left: 20%;}/*定义动画*/@-webkit-keyframes move { /*兼容性写法。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%);  }}

解析：
move 关键帧动画名称。
translateY使图标向下偏移。
opacity设置图标透明度。

0 0