CSS3动画页面制作(下)

这次做了一个css3的页面给大家一起看看。3动画在游戏官网方面已有非常多的案例及实践,3动画能让单调的页面增加动感,提升用户体验…..

延续上次讲的接下来实际制作一个常见的“CSS3动画头+内容+内容+内容”的页面,这样的页面应用范围也比较广,经常看到如腾讯游戏活动页面、迅雷、淘宝等,都是这样完成的,相对于比较静态单调的页面,更能让大家去接受,去阅读。 下面我就已迅雷的一个活动页面做范本。

CSS3动画页面制作(下)  CSS3动画页面制作(下)

demo页面

header
我们先把整体框架页面讲完再讲顶部的css3动画

CSS3动画页面制作(下)css部分
这里的图片是用的雪碧图(png小图和在一起的)所以用了background-position选择图片的位置

CSS3动画页面制作(下)html部分CSS3动画页面制作(下)cont01cont02cont03cont04
下面的我们就直接过了,只把html放出来,css太长就不放出来了,因为重点在下面的css3上。最后我还是会把这个页面的代码打包给大家的。

html部分

CSS3动画页面制作(下)

CSS3动画

CSS3动画页面制作(下)太阳
这里有几个要注意的 一要加浏览器的兼容前缀,上一次有提到。二要注意关键帧的名字。三注意关键帧的应用。
-webkit-是兼容Safari 和 Chrome的前缀
@keyframes 动画的名称:fadeln;完成周期是1.5秒;延迟1秒,后开始; 速度曲线ease(默认。动画以低速开始,然后加快,在结束前变慢);规定动画在播放之前或之后都被应用
关键帧0%的时候透明度为0,Y轴向上偏离50像素, 关键帧80%的时候透明度100%Y轴向下偏离2像素, 关键帧100%回到原始位置

CSS3动画页面制作(下)循环飘动的云
这个是无限循环播放,要注意关键帧的点的位置。infinite这个是无限循环;alternate轮流反向播放
@keyframes 动画的名称:float;完成周期是6秒; 速度曲线linear 匀速运动;无限循环播放;轮流反向播放
关键帧0%时X轴在原点;关键帧33%时X轴上向右偏离80像素; 关键帧66%复位原点;关键帧100%X轴上向左偏离80像素

CSS3动画页面制作(下)3d飘带
这个关键帧有点不同,但不多讲了想了解的可以去W3C上看

CSS3动画页面制作(下)

大字

CSS3动画页面制作(下)小字和时间CSS3动画页面制作(下)人物
transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转;scale是指放大缩小默认是1

CSS3动画页面制作(下)

总结:

css3熟悉以后还好,刚开始肯定有点搞,也可以借助工具,上次讲到的动画库animate.css,也还可以借助个人蛮喜欢的腾讯的动画工具来使用。好了,CSS3动画篇到这里就告一段落了。希望你们喜欢哈,发现蛮多人看了关注了也不问啥,可以和我互动下,会与不会的我都会回答的。

下次就要开始讲移动端的一些事了,会分享给大家一些注意点啊,框架啊,一些比较好的东西,还会涉及到js。每次写东西不是想到什么就写。而是我自己也在学,所以可以多留言,一些互相进步。

CSS3动画页面制作(下)

未经允许不得转载:水平线设计 » CSS3动画页面制作(下)

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)