CSS----动画

作者: 忆往昔04551 | 来源:发表于2018-06-11 20:36 被阅读0次

1、在哪儿产生动画,比如:width height background-color

2、动画的时间,比如:1s 500ms 0.5s

3、运动曲线,比如linear匀速、ease首尾慢

4、延迟多长时间开始动画

运动曲线:all 1s linear      匀速

                  all 1s ease       开始和结束慢速,中间加速

                  all 1s ease-in     开始慢速,结尾突然停止

                  all 1s ease-out       突然开始,结尾慢速

                  all 1s ease-in-out       开始和结束慢速

transfrom变形: translate(100px,100px)             位移

                           rotate(360deg)                          旋转

                            scale(0.5, 0.2)                          缩放

                            skew(0, 45deg)                         斜切

设置盒子按3D空间显示:transform-style: preserve-3d

设置透视距离:perspective

animation-play-state: paused           动画暂停

animation-play-state: running           动画运行

     多帧动画:          @keyframes moving{

                                          0%  {    transform: translateY(0px);

                                                   }

                                          50% { transform: translateY(400px);

                                                   }

                                           100% { transform: translateY(0px);

                                                    }

                                          }

就算跌倒,也要豪迈的笑

相关文章

  • CSS----动画

    1、在哪儿产生动画,比如:width height background-color 2、动画的时间,比如:1s ...

  • css----浮动

  • CSS----样式

    1、样式表:(1)内部样式: (2)外部样式:新建一个css文件,将样式写入 在html文件中调用css文件内的样...

  • CSS----浮动、塌陷

    使用float使元素浮动,从而脱离文档流,可选值: none:默认值 left:脱离文档流,向页面左侧浮动 ...

  • CSS----表单、框架集

    解决父元素的高度塌陷 clearfix:after{ clearfix{ clear:both zoom:1 ...

  • css----行内元素深究

    我们知道行内元素有替换元素和非替元素之分: 替换元素:浏览器根据其标签和属性来判断要显示的内容的标签,比较常见的是...

  • CSS----定位(相对、绝对、固定)

    定位: 指定的元素摆放到页面的任意位置 通过定位可以任意的摆放元素 通过position属性来设置元素的定位...

  • Html/CSS----表格与表单

    表格 table、tr、th、td 使用table标签创建一个表格。 tr表示表格中的一行。 tr中可以编写一个或...

  • CSS----网页的外观2

    css样式分为内部样式表:CSS样式编写到head中的style标签里,通过CSS选择器选定指定元素,可以同时为这...

  • CSS----文本标签、列表、字体样式

    文本标签: em:表示语气上的强调,浏览器中默认使用斜体显示 strong:表示强调的内容,比em更强烈,默认...

网友评论

    本文标题:CSS----动画

    本文链接:https://www.haomeiwen.com/subject/amtkeftx.html