用动画说动画3--&怎样制作旋转的彩环&
lash,&,36,
的情况下,110,,
:,&1,:1,1&
&2,2&11,-&21
--&F8(Ctrl+F8)—:—2&
&3:可以插入文,&
冰莹Flash动画学前班教材
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。5分钟内设计师响应
十年专注设计领域
费用最多可节约50%
已成功添加收藏
已取消收藏
动态圆环波纹视频
素材编号 ： 3153425
图片像素 ： 541*787&像素
素材格式 ： FLA
素材大小 ： 1.11 KB
收藏次数 ： 0
(仅供参考学习使用，商业使用需要作者授权)
红动创办于2005年，老品牌值得信赖
在线客服 :
客服热线 :这是一个简单的效果，适合新手练习，主要就是用到补间动画的创建，其实很多复杂的flash动画都是从简单的例子逐步深入，慢慢积累经验。效果如下：
制作很简单，只要几步就可完成。
1；首新建一个高宽适当的flash文档，帧数设为30，背景默认
2；在时间帧上面新建三层，分别为背景层，圆环一，圆环二。
3；导入背景图片，选择文件》》导入》》导入到舞台，并将图片背景转换为影片剪辑。
4；在背景层的第15帧插入帧。
5；选中圆环一，用椭圆形工具，边框为4，填充不要，在舞台中画一个大小合适的圆，如下图，
6；把圆环一转换为影片剪辑，并在圆环一图层第20帧查入关键帧，如下图；
7：选择圆环一第20帧，用变形工具把圆环水平翻转，如下图；
8；选中圆环1所有帧，并复制帧，粘贴到圆环2第一帧，并在两层同创建补间动画，粘贴后的图层样式为下图；
9；选中圆环2图层最后一帧，吧圆环向左稍微一动一点点。
好了测试影片，一个简单的旋转圆环制作完成，你学会了吗。
本站所有大部分来自网络和会员上传提供，创作权归原作者所有！
如果部分教程的图片无法显示影响观看，请提交错误报告给本站。CSS 实现加载动画之二-圆环旋转
上次简单的介绍了下如何用代码实现菊花旋转的加载动画，动画点击，这次继续我们的动画系列，实现另外一种加载动画，圆环旋转。与上次不同的是，菊花旋转是通过改变元素透明度来实现动画，这次因为考虑到元素叠加，加上元素本身带有背景色，如果改变透明度会影响效果，所以直接改变元素的背景颜色，加上适当的延时，就可以实现这种圆环的效果。动画实现的根本原理就是将每个需要变化的元素以及变化的过程分离出来。
所有的动画在chrome中调试，未考虑到兼容性以及性能问题，只是单纯的介绍如何实现效果。如果有更好的方法会及时更新。
2.代码实现思路
实现这个动画关键点在于如何将每个变化的元素分离出来，并且实现这个圆环效果。用图片说明下：
2.1 先定义元素容器，元素的两块内容宽度为50%，绝对定位，距离左侧50%，这样是方便内容绕着元素中心旋转。
2.2 每个子元素定义左边框，边框的颜色和外层容器的背景色相同，这样有镂空的感觉，注意的是子元素需左移边框一半的宽度，确保容器的中心为边框的中心，不然子元素旋转的时候会有误差。
2.3 定义每个子元素旋转的度数，打造出扇形的形状，最后拼成右边圆的形状。
2.4 将右边圆的所有子元素复制，旋转180度，拼出左边圆的形状，此时左边圆的子元素会覆盖右边的形状，所以要使用clip进行裁切，只显示左边圆的部分。这时构成一个完整的圆的所有元素就齐了，显示如2.5.
2.6 此时元素的形状还不是标准的圆，在元素上覆盖与背景同色的圆，然后外层容器使用border-radius形成一个正圆，这时整个元素显示为环形形状。
2.7 定义动画的关键帧，并用在每个子元素上。这个动画就是改变每个子元素的背景色，顺时针延迟动画的开始时间，最终就形成了gif图中的显示方式。
3. 主要使用的技术
这个动画其实并不复杂，也没用到多深奥的技术，主要还是使用了transform和animation属性，这里不详细解释使用用法了。
另外还用到clip属性，控制元素的显示范围，裁剪绝对定位元素。这个属性定义一个裁剪矩形，在这个矩形范围内的元素才可见。
使用方法：clip:rect(0px,16px,32px,1px);
&四个有效值为：rect (top, right, bottom, left)
&1 &!DOCTYPE &
&4 &meta http-equiv=&Content-Type& Content=&text/ charset=utf-8;&&
&5 &title&3实现加载的动画效果2&/title&
&6 &meta name=&author& content=&rainna& /&
&7 &meta name=&keywords& content=&rainna's css lib& /&
&8 &meta name=&description& content=&CSS3& /&
&9 &style&
10 *{margin:0;padding:0;}
11 body{background:#e7e7e7;}
13 .m-load,.m-load2{width:32height:32margin:100}
14 .m-load{background:url('load.gif') center center no-}
16 /** 加载动画的静态样式 **/
17 .m-load2{position:border-radius:32overflow:}
18 .m-load2 .box,.m-load2 .item{position:left:50%;top:0;width:50%;height:100%;}
19 .m-load2 .item{left:0;width:100%;-webkit-transform-origin:}
20 .m-load2 .item:before{content:'';position:left:-1top:0;width:100%;height:100%;background:#444;border-left:2px solid #e7e7e7;}
21 .m-load2 .item:nth-child(2){-webkit-transform:rotate(45deg);}
22 .m-load2 .item:nth-child(3){-webkit-transform:rotate(90deg);}
23 .m-load2 .item:nth-child(4){-webkit-transform:rotate(135deg);}
24 .m-load2 .item:nth-child(5){-webkit-transform:rotate(180deg);}
25 .m-load2 .box:nth-child(2){-webkit-transform:rotate(180deg);-webkit-transform-origin:clip:rect(0px,16px,32px,1px);}
26 .m-load2 .circlebg{position:left:50%;top:50%;width:22height:22margin:-11px 0 0 -11background:#e7e7e7;border-radius:22}
28 /** 加载动画 **/
29 @-webkit-keyframes load{
30 & & 0%{background:#e7e7e7;}
31 & & 100%{background:#444;}
33 .m-load2 .box:nth-child(1) .item:nth-child(1):before{-webkit-animation:load 0.8s linear 0}
34 .m-load2 .box:nth-child(1) .item:nth-child(2):before{-webkit-animation:load 0.8s linear 0.1}
35 .m-load2 .box:nth-child(1) .item:nth-child(3):before{-webkit-animation:load 0.8s linear 0.2}
36 .m-load2 .box:nth-child(1) .item:nth-child(4):before{-webkit-animation:load 0.8s linear 0.3}
37 .m-load2 .box:nth-child(2) .item:nth-child(1):before{-webkit-animation:load 0.8s linear 0.4}
38 .m-load2 .box:nth-child(2) .item:nth-child(2):before{-webkit-animation:load 0.8s linear 0.5}
39 .m-load2 .box:nth-child(2) .item:nth-child(3):before{-webkit-animation:load 0.8s linear 0.6}
40 .m-load2 .box:nth-child(2) .item:nth-child(4):before{-webkit-animation:load 0.8s linear 0.7}
41 &/style&
42 &/head&
45 &div class=&m-load&&&/div&
47 &div class=&m-load2&&
48 & & &div class=&box&&
49 & & & & &div class=&item&&&/div&
50 & & & & &div class=&item&&&/div&
51 & & & & &div class=&item&&&/div&
52 & & & & &div class=&item&&&/div&
53 & & & & &div class=&item&&&/div&
54 & & &/div&
55 & & &div class=&box&&
56 & & & & &div class=&item&&&/div&
57 & & & & &div class=&item&&&/div&
58 & & & & &div class=&item&&&/div&
59 & & & & &div class=&item&&&/div&
60 & & &/div&
61 & & &div class=&circlebg&&&/div&
63 &/body&
64 &/html&
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'}