12 圆角、动画

最新推荐文章于 2024-08-22 11:06:05 发布

练习代码时长两年半的小江

最新推荐文章于 2024-08-22 11:06:05 发布

阅读量129

点赞数 2

文章标签：前端 css html 开发语言

本文链接：https://blog.csdn.net/qq_51415791/article/details/137793278

版权

本文详细介绍了CSS3中的圆角设置（包括单一语法和复合写法），以及动画的创建、参数（如名称、时长、延迟等）和控制，涵盖了关键帧动画和各种动画方向与状态。

摘要由CSDN通过智能技术生成

1.1 圆角

创造动画
- @keyframes 动画名称{ from{} to{} } from指的起点 to指的是终点
- @keyframes 动画名称{ 0%{} 。。。。。 100%{} }
使用动画
- 单一
  - 动画的名字：animation-name
  - 动画的时间：animation-duration
  - 动画的延迟时间：animation-delay
  - 运动曲线：animation-timing-function
  - 动画的播放次数：animation-iteration-count 写几就是运动几次 infinite：循环运动
  - 动画的方向：animation-direction
    - normal
    - reverse
    - alternate
    - alternate-reverse
  - 播放状态：animation-play-state
    - paused：暂停
    - running：运动
- 复合：animation
  - 注意事项：写了2个时间前者为运动时间，后者为延迟时间