css3线条延伸动画(css线性动画)

1. css线性动画

一：设置背景颜色

　　1.准备编辑HTML

　　首先确定要使用的背景颜色，HTML颜色由每个代码决定。在计算机的Web浏览器中访问http://www.php.cn/html/html-colornames.html，就能查看所有颜色的代码，并且在“HEX”部分中选择要使用的基色。

　　2.使用Notepad++或Notepad打开HTML文件，并且把页面的所有样式信息（包括背景颜色）添加进来。将“background-color”属性添加到“body”元素。background-color要在body括号之间输入，如下：

　　<bodybgcolor="red">背景红色

　　或者

　　body{

　　background-color：red

　　}

　　html如何设置背景颜色？两种方法教会你

　　3.您可以使用“background-color”来定义其他元素的背景，例如标题，段落等。例如，要将背景颜色应用于主标题（<h1>）或段落（<p>）。

　　二：创建渐变背景

　　1.制作渐变时，我们需要两条信息起点和角度，以及渐变之间过渡的颜色。您可以选择多种颜色以使渐变在所有颜色之间移动，并且可以设置渐变的方向或角度。

　　属性：

　　背景：线性梯度（方向/角度，颜色1，颜色2，颜色3，等）;

　　2.制作垂直渐变的时候，如果未指定方向，则渐变将从上到下要创建渐变，要在<style></style>标记之间添加以下代码：

　　html{

　　min-height：100％;

　　}

　　body{

　　background：-webkit-linear-gradient（left，＃93B874，＃C9DCB9）;

　　background：-o-linear-gradient（right，＃93B874，＃C9DCB9）;

　　background：-moz-linear-gradient（right，＃93B874，＃C9DCB9）;

　　背景：线性梯度（到右侧，＃93B874，＃C9DCB9）;

　　background-color：＃93B874;

　　}

　　当然也可以向渐变添加方向以更改颜色偏移的显示方式，您不仅可以添加两种以上的颜色，还可以在每种颜色之后添加一个百分比。也可以设置每个颜色段所需的间距，为您的颜色添加透明度，使用相同的颜色从颜色淡化为空。也可以使用该rgba()函数来定义颜色，结束值决定透明度：0实体和1透明。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h54308.shtml

2. css3边框线条流动动画

两个div并排排列，设置为浮动，并将两个div的边框设置为零，然后设置左边div的右边框为一个px，这样就形成了数值分割线。

3. css3线条流动动画

可以使用css属性border进行设置啊。也可以单独设置一边border-bottom等。

4. flash线条延伸动画

一、新建一个flash文档，舞台550*400.舞台颜色随意。然后导入一张风景图片（风景图片可以在网上搜索下载，有的是）。把风景图片与舞台对齐，全居中。如果图片过小或过大，可以先用任意变形工具把它缩放到合适大小，或者在变形面板里按比例调整到舞台大小，多余的部分可以先把它打散，然后删除舞台之外部分。

二、新建图层二，复制图层一调好的图片到图层二，在右键下拉对话框选择“粘贴到当前位置”，这样就可以和图层一的图片位置完全相同。图层二图片粘贴好以后，在变形面板按比例适当放大到110%。然后把图层一图层二分别上锁。

三、新建图层三，在图层三里创建一个影片剪辑元件，命名为放大镜。点击确定，进入元件编辑舞台。

4现在我们来画一个放大镜。先选择椭圆工具，笔触色为黑色，大小为8.填充色要在颜色面板里进行设置，打开颜色面板，选择“径向渐变”，然后在下面的调色条里，进行调色。调色时要注意，为了尽量使放大镜真实一些，双击调色条第一个调色块，颜色为白色（ffffff），Alpha为0，右端的调色块颜色为白色，Alpha为20%。

5按住shift键，画一个圆，全居中。为了使放大镜更形象，可以适当加些反光效果。然后再画上其他部分。

六、选中放大镜的玻璃部分，转换为影片剪辑元件，命名为“镜片”。然后在放大镜元件里把镜片删除。

7返回主场景，把镜片元件拖入图层三舞台，调整到合适大小。然后双击图层三前面的属性图标，在弹出的列表框里设置为“遮罩层”。拖动图层二，使之成为图层三的“被遮罩层”。

8、新建图层四，从库中把“放大镜”拖入舞台，收缩到合适大小，要与图层三的镜片元件吻合，看上去像一个整体。

9图层一到图层四全部延伸到100帧。分别在图层三和图层四的第100帧插入关键帧，把镜片和放大镜两个元件同时选中同时移动到右端一个位置，这两个图层都设置成传统补间动画，上锁。

10这样就ok了，可以按Ctrl+Enter键测试一下效果

5. css简单动画

坚持一下，写的属性有没有animation-play-state:pasued，如果为pasued，就暂停停止了