CSS笔记

最新推荐文章于 2024-08-27 14:29:58 发布

陈两全

最新推荐文章于 2024-08-27 14:29:58 发布

阅读量504

点赞数 10

文章标签： css 笔记前端

本文链接：https://blog.csdn.net/2201_76100326/article/details/141459543

版权

8.23

1.动画效果

1.1.调用方法

语法：创建动画：@keyframes 调用动画：animation

其中调用属性有几个属性值如下表

参数值	效果
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function	规定动画的速度曲线。默认是 "ease"
animation-delay	规定动画何时开始。默认是 0
animation-iteration-count	规定动画被播放的次数（number类型）。默认是 1，（infinite: 无限次）
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal" ，‘alternate'
animation-play-state	规定动画是否正在运行或暂停。默认是 "running",'paused'
animation-fill-mode	规定对象动画时间之外的状态.forwards,backwards默认值

1.2.原理阐释

通过 @keyframes(关键帧动画) 规则，您能够创建动画。 2、创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。 3、以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间。 4、为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。 5、在CSS样式中，用animation属性来应用 @keyframes所定义的动画

1.3.个人释义

通过规定不同时间段的状态以及样式，使原本静止的图片按照一定的方式进行改变.

其中百分之几十其实是时间段，百分号后面的花括号表示到达百分之几十的时间达成设置的状态以及样式

1.4.css释义

/* @keyframs创建动画效果  后跟动画的名称自己起名字最好遵守命名规则*/
@keyframes 动画名称{
/* 百分比表示百分之几的时间 */
    ？%{
/* 内填写时间过程中要达成的某种状态 */
      属性:属性值;
    }
/* 时间 */
    ？%{
/* 状态 */
      属性:属性值;
    }
  }