仿网易nec首页动画效果(实现原理+代码)

2024-07-11 08:50:15

字体：大中小

来源：转载

供稿：网友

仿网页nec首页动画效果
nec链接：http://nec.netease.com/
首先，介绍animation
animation检索或设置对象所应用的动画特效。
animation由“keyframes”这个属性来实现这样的效果。
keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。

关于animation属性介绍：
animation-name：检索或设置对象所应用的动画名称
animation-duration：检索或设置对象动画的持续时间
animation-timing-function：检索或设置对象动画的过渡类型
animation-delay：检索或设置对象动画延迟的时间
animation-iteration-count：检索或设置对象动画的循环次数
animation-direction：检索或设置对象动画在循环中是否反向运动
animation-play-state：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

nec动画实现原理：
采用三层背景层、气泡层、文字镂空层。气泡层通过animation属性实现了运动效果。

html结构：

复制代码

上一篇：div+css背景渐变色代码示例

下一篇：Button未设type属性时在非IE6/7中具有submit特性并自动提交form