卷轴动画添加了哪些属性关键帧动画?

html-css016

卷轴动画添加了哪些属性关键帧动画?,第1张

添加了几个动画效果的属性

通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类:transform、transition以及animation。 transform rotate 设置元素顺时针旋转的角度。

1、打开软件,新建FLASH文档。

2、在舞台画如图所示形状。

3、然后右键单击选择打开转换为元件。

4、选择转换为图形元件。

5、复制一个元件出来,并排放到舞台中间。

6、然后分散到两个图层里。

1、圆形

#circle{width:100pxheight:100pxbackground:red-moz-border-radius:50px-webkit-border-radius:50pxborder-radius:50px}

2、椭圆

#oval{width:200pxheight:100pxbackground:red-moz-border-radius:100px / 50px-webkit-border-radius:100px / 50pxborder-radius:100px / 50px}

3、等边三角

#triangle-up{width:0height:0border-left:50px solid transparentborder-right:50px solid transparentborder-bottom:100px solid red}

4、五角星

#star-five{margin:50px 0position:relativedisplay:blockcolor:redwidth:0pxheight:0pxborder-right:100px solid transparentborder-bottom:70px solid redborder-left:100px solid transparent-moz-transform:rotate(35deg)-webkit-transform:rotate(35deg)-ms-transform:rotate(35deg)-o-transform:rotate(35deg)}#star-five:before{border-bottom:80px solid redborder-left:30px solid transparentborder-right:30px solid transparentposition:absoluteheight:0width:0top:-45pxleft:-65pxdisplay:blockcontent:''-webkit-transform:rotate(-35deg)-moz-transform:rotate(-35deg)-ms-transform:rotate(-35deg)-o-transform:rotate(-35deg) }#star-five:after{position:absolutedisplay:blockcolor:redtop:3pxleft:-105pxwidth:0pxheight:0pxborder-right:100px solid transparentborder-bottom:70px solid redborder-left:100px solid transparent-webkit-transform:rotate(-70deg)-moz-transform:rotate(-70deg)-ms-transform:rotate(-70deg)-o-transform:rotate(-70deg)content:''}

5、爱心

#heart{position:relativewidth:100pxheight:90px}#heart:before,#heart:after{position:absolutecontent:""left:50pxtop:0width:50pxheight:80pxbackground:red-moz-border-radius:50px 50px 0 0border-radius:50px 50px 0 0-webkit-transform:rotate(-45deg)-moz-transform:rotate(-45deg)-ms-transform:rotate(-45deg)-o-transform:rotate(-45deg)transform:rotate(-45deg)-webkit-transform-origin:0 100%-moz-transform-origin:0 100%-ms-transform-origin:0 100%-o-transform-origin:0 100%transform-origin:0 100%}#heart:after{left:0-webkit-transform:rotate(45deg)-moz-transform:rotate(45deg)-ms-transform:rotate(45deg)-o-transform:rotate(45deg)transform:rotate(45deg)-webkit-transform-origin:100% 100%-moz-transform-origin:100% 100%-ms-transform-origin:100% 100%-o-transform-origin:100% 100%transform-origin:100% 100%}

6、倒三角

#triangle03{width:0height:0border:50pxsolid transparentborder-top:50pxsolid blue }

在css中让文字显示方式从右边开始的操作方法和步骤如下:

1、首先,创建一个新的html文档,见下图红框中的内容,然后进入下一步。

2、其次,完成上述步骤后,可以更改文档的名称,见下图红框中的内容,然后进入下一步。

3、接着,完成上述步骤后,输入文本,见下图红框中的内容,然后进入下一步。

4、然后,完成上述步骤后,进一步设置以下文本的对齐方式,示例代码如下图所示,然后进入下一步。

5、最后,完成上述步骤后,在浏览器中预览,文本右对齐,见下图红框中的内容。这样,问题就解决了。