双鱼的CSS3动画

2015.03.23 14:25 bizhongbio , 1071 1

一、前言

通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

在 CSS3 中创建动画,需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

二、例子

下面我以自己博客文章的动画效果为例。

2.1 HTML 代码

2.2 部分 CSS 代码

2.3 主要 CSS 代码

2.3.(1) 把 “OUT” 动画捆绑到 figcaption 元素的代码

2.3.(2) 在 @keyframes 中的 CSS 样式代码

2.3.(3) 补充(增加 :hover 选择器)CSS 代码

三、总结

双鱼bizhongbio 没有详细讲解 @keyframes 规则和所有动画属性,只是举了一个 CSS3 动画实例。如果你想了解更多有关 CSS3 动画的知识,可以访问:CSS3 动画(http://www.w3school.com.cn/css3/css3_animation.asp

感谢你的阅读,本文版权归 双鱼bizhongbio 所有,转载时请注明出处。
注明出处格式:双鱼bizhongbio(https://bizhongbio.github.io/article/pisces-css3-keyframes/

上一篇:
下一篇:

分享到

相关文章

1条评论

  1. 双鱼bizhongbio 2015.03.28 15:38

    让“CSS3 动画”飞起来!

发表评论