css3 - 图标元素动画效果3 - 图标整体在Y轴上移

最新推荐文章于 2025-05-06 14:48:22 发布

erdouzhang

最新推荐文章于 2025-05-06 14:48:22 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css3

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/71404542

css3 专栏收录该内容

35 篇文章

订阅专栏

该博客介绍了一种使用CSS3创建图标元素动画的方法，通过关键帧动画`move`实现图标在Y轴上的位移，同时改变其透明度，达到从底部渐显的效果。在初始状态，图标被偏移-100%并完全透明，然后逐渐移动回原位并变为完全不透明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

这里写图片描述

初始状态使图标初始位置向下偏移-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%);
  }
}