爱刨根知识网

  1. 首页 > 经验知识 > >

CSS3技术实现简单动画的制作方法 如何使用css3制作风车

生活经验知识分享


传统Web设计开发过程中，动画效果主要借助flash动画制作工具实现动画的制作 。随着JS技术尤其是JQuery技术的出现，Web开发人员可以借助JS或者JQuery技术实现各类Web动画的开发 。除此之外在HTML5+CSS3技术下可直接借助CSS3技术实现简单动画的制作 。本文以风车旋转效果实现为例，对CSS3动画制作进行简单分析与说明 。首先给出最终实现效果，如下图所示：
屏幕录播转gif格式可能效果较差
CSS3编写旋转风车效果如上图所示，本例子主要涉及CSS3属性包括CSS3动画属性与CSS3 2D转换属性 。其中2D属性转换主要用于实现对图片进行旋转操作，动画属性主要用于实现动画控制功能 。所需属性分别描述如下：
1、CSS3 2D 转换
通过 CSS3 transform属性，我们能够对元素进行移动、缩放、转动、拉长或拉伸 。我们例子中主要使用到元素的旋转方法rotate()，通过 rotate() 方法，元素顺时针旋转给定的角度 。rotate方法参数为旋转度数，一般用deg表示，如30°为30deg 。
2、CSS3 动画
动画主要是指指定元素从一个状态转移到另一个状态，CSS提供@keyframes 规则用于实现对状态的定义，通过@keyframes关键帧设置，最终可以实现动画效果 。规则编写好之后需要使用animation属性，将动画规则绑定到对应元素上 。animation主要属性值包括规则名称、执行时间及执行次数 。写法如下：
animation:mymove 5s infinite;//mymove为规则名称 infinite表示重复执行 @keyframes mymove{…}//规则编写
明确旋转风车所需CSS3属性之后可以选择风车素材进行Web页面设计，本例风车素材主要包括叶片部分与手柄部分 。素材如下图：
本例所需素材
使用以上素材结合HTML5页面编码技术及DIV布局技术等，可以完成页面的设计与开发，本例#nam为叶片样式，hanlde为手柄样式，均使用层布局，设置div背景为素材图片 。使用animation keyframes等进行动画设计 。本例核心CSS样式文件代码如下：
【CSS3技术实现简单动画的制作方法 如何使用css3制作风车】
本例CSS样式代码
-- 展开阅读全文 --

    推荐阅读


    上一篇：男生霸气成熟说说 成熟说说男生超拽霸气

    下一篇：电脑ps制作海报的教程 如何用photoshop制作海报