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

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

初始状态使图标初始位置向下偏移-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设置图标透明度。

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

css3 - 图标元素动画效果4 - 动画延迟
上一篇中,四个图标的动画效果都是同时进行的:为了使图标由先后顺序,我们将每个动画添加延迟.如下图: 在线演示(刚一加载效果不明显,刷新一下) html: <div class="box ...
css3 - 图标元素动画效果5 - 弹性动画效果
在线演示(刷新一下动画效果明显) 让图标运动到终点时,并非减速停止在终点,而是到达终点后继续向上运动,超过一定距离后再反方向运动到终点,形成一种往复的效果. 我们可以使用帧动画来实现这样的效果,但是如 ...
CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
css 3d闪烁动画,CSS3实现闪烁动画效果的方法
本文实例讲述了CSS3实现闪烁动画效果的方法.分享给大家供大家参考.具体方法如下: 给class属性名为className的元素添加闪烁动画效果复制代码代码如下: .className{ -webk ...
HTML2d动态效果图,html5+css3实现2D-3D动画效果实例
html5+css3实现2D-3D动画效果实例主要实现的功能就是一些2D.3D的动画效果,如平移.缩放.旋转等等. 文章目录 html5+css3实现2D-3D动画效果实例 2D变换 3D变换案例 ...
WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
动态效果html wow,WOW.js ? 在页面滚动时展现动感的元素动画效果_html/css_WEB-ITnose...
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构该css3线条波浪动画效果的HTML结构如下: CSS样式然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...

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

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

最新文章

热门文章