CSS3 动画

news/2024/12/22 20:42:26/

个人主页:学习html" title=前端>前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的html" title=前端>前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!


文章目录

  • ✍CSS3 动画
    • 💎1 什么是帧动画
    • 💎2 定义关键帧
    • 💎3 animation
      • 🌹3.1 animation-name
      • 🌹3.2 animation-duration
      • 🌹3.3 animation-timing-function
      • 🌹3.4 animation-delay
      • 🌹3.5 animation-direction
      • 🌹3.6 animation-iteration-count
      • 🌹3.7 animation-play-state
      • 🌹3.8 animation-fill-mode
    • 💎4 动画库
  • ✍HTML、CSS规范
    • 💎1 命名规范
    • 💎2 CSS 书写
      • 🌹2.1 空格规范
      • 🌹2.2 选择器规范
      • 🌹2.3 属性规范
      • 🌹2.4 大小写规定
      • 🌹2.5 CSS3 兼容前缀
      • 🌹2.6 CSS书写顺序
      • 🌹2.7 链接伪类顺序
      • 🌹2.8 CSS复合写法与单例写法
      • 🌹2.9 布局方式选择
      • 🌹2.10 定位z-index取值范围

✍CSS3 动画

💎1 什么是帧动画

在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些问题。CSS3 的出现,让动画变得更加容易,性能也更加好。

animation比较类似于 flash 中的逐帧动画,逐帧动画就像电影的播放一样,表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态,整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道,这种逐帧动画是由关键帧组成,很多个关键帧连续的播放就组成了动画,在 CSS3 中是由属性keyframes来完成逐帧动画的。

💎2 定义关键帧

通过 @keyframes 设置自定义名称的动画关键帧,在动画关键节点设置数值:

  • AnimationName:动画名称,开发人员自己命名
  • percentage:为百分比值,可以添加多个百分比值
  • properties:样式声明,例如:colorleftwidth等等
html" title=css>css">@keyframes animationName {from {properties: value;}percentage {properties: value;}to {properties: value;}
}
/* or */
@keyframes animationName {0% {properties: value;}percentage {properties: value;}100% {properties: value;}
}

💎3 animation

语法:

html" title=css>css">animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  • name:指定要绑定到选择器的关键帧的名称
  • duration:动画指定需要多少秒或毫秒完成
  • timing-function:设置动画将如何完成一个周期
  • delay:设置动画在启动前的延迟间隔
  • iteration-count:定义动画的播放次数
  • direction:指定是否应该轮流反向播放动画
  • fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式
  • play-state:指定动画是否正在运行或已暂停

🌹3.1 animation-name

它是用来设置动画的名称,可以同时赋值多个动画名称,用,隔开:

html" title=css>css">animation-name: none | IDENT[, none | IDENT] *;
animation-name: mymove;

默认值:none, 指定有没有动画

🌹3.2 animation-duration

它是用来设置动画的持续时间,单位为s,默认值为0

html" title=css>css">animation-duration: <time>[, <time>] *;
animation-duration: 2s;

🌹3.3 animation-timing-function

animation-timing-function 指定动画将如何完成一个周期:

html" title=css>css">animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) | step-start | step-end;

ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)transition-timing-function 类似:

  • ease:动画缓慢开始,接着加速,最后减慢,默认值
  • linear:动画从头到尾的速度是相同的
  • ease-in:以低速开始
  • ease-out:以低速结束
  • ease-in-out:动画以低速开始和结束

🌹3.4 animation-delay

它是来设置动画的开始时间,单位是s或者ms,默认值为 0:

html" title=css>css">animation-delay: <time>[, <time>] *;
animation-delay: 2s;

🌹3.5 animation-direction

它是来设置动画播放的方向,默认值为normal表示向前播放,alternate代表动画播放在第偶数次向前播放,第奇数次向反方向播放:

html" title=css>css">animation-direction: normal|reverse|alternate|alternate-reverse;

取值:

描述
normal默认值。动画按正常播放。
reverse动画反向播放。
alternate动画在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放。
alternate-reverse动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放。

🌹3.6 animation-iteration-count

它是来设置动画循环的次数,默认为1infinite为无限次数的循环:

html" title=css>css">animation-iteration-count: 3;
animation-iteration-count: infinite;

🌹3.7 animation-play-state

它主要是来控制动画的播放状态:running代表播放,而paused代表停止播放,running为默认值:

html" title=css>css">animation-play-state: paused|running;

取值:

描述
paused指定暂停动画
running指定正在运行的动画

这个属性一般是单独使用。

🌹3.8 animation-fill-mode

作用:

  • forwards:大白话:保留动画的最终效果(to)
  • backwards:大白话:采用第一帧(from)作为盒子的效果。如果设置方向为reverse,那么采用最后一帧(to)作为盒子的效果。
  • both:大白话:既采用第一帧(from)作为盒子的效果,保留动画的最终效果(to)
html" title=css>css">animation-fill-mode: none|forwards|backwards|both;

取值:

描述
none默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。
backwards动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 “normal” 或 “alternate” 时)或 to 关键帧中的值(当 animation-direction 为 “reverse” 或 “alternate-reverse” 时)。
both动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。

💎4 动画库

动画库链接:animate.html" title=css>css
了解:

  • 基础用法,很多时候会结合JS来实现动态效果
  • 阅读源码

个人主页:学习html" title=前端>前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的html" title=前端>前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!


文章目录

  • ✍CSS3 动画
    • 💎1 什么是帧动画
    • 💎2 定义关键帧
    • 💎3 animation
      • 🌹3.1 animation-name
      • 🌹3.2 animation-duration
      • 🌹3.3 animation-timing-function
      • 🌹3.4 animation-delay
      • 🌹3.5 animation-direction
      • 🌹3.6 animation-iteration-count
      • 🌹3.7 animation-play-state
      • 🌹3.8 animation-fill-mode
    • 💎4 动画库
  • ✍HTML、CSS规范
    • 💎1 命名规范
    • 💎2 CSS 书写
      • 🌹2.1 空格规范
      • 🌹2.2 选择器规范
      • 🌹2.3 属性规范
      • 🌹2.4 大小写规定
      • 🌹2.5 CSS3 兼容前缀
      • 🌹2.6 CSS书写顺序
      • 🌹2.7 链接伪类顺序
      • 🌹2.8 CSS复合写法与单例写法
      • 🌹2.9 布局方式选择
      • 🌹2.10 定位z-index取值范围

✍HTML、CSS规范

规范是更好编写代码,规范不是强制要求,而是一种建议,初学的时候应该尽可能采用这些建议。如果特别熟练了,那么就根据自己的习惯来编写即可。

💎1 命名规范

1、命名需要是具备语义性的单词,不能用数字、拼音,或者使用数字开头:

html" title=css>css">正确示范 : wrap description title  content
错误示范 :  aaaa a1 $we 4tdds

2、命名需要多个单词连接的情况下,标记语言中可以使用 _ - 进行连接 不能直接单词拼接。

注意:书写风格必须统一,不容许出现 _ - 一起使用的情况。更推荐使用 - 这样更清晰。

html" title=css>css">正确示范 :  header-nav content-left slide-bar
错误示范 :  headernav slideBar ContentLeft

3、命名需要进行适当的缩写,单词连接层级不要超过4层

html" title=css>css">正确示范 :  head-tit-ico
错误示范 :  header-title-left-logo-icon

4、不容许通过1、2、3等序号进行命名

html" title=css>css">正确示范: content-product
错误示范: content1、content2

5、避免class与ID重名

6、id用于识别模块或一级结构区域且必须唯一。定义了ID名称,尽量不要改动

常用命名

header内容contentfooter导航nav
子导航subnav栏目column主体main新闻news
版权copyright文章列表list加入joinus合作伙伴partner
标志logo侧栏sidebar横幅banner状态status
菜单menu子菜单submenu滚劢scroll搜索search
标签页tab提示信息msg小技巧tips标题title
指南guild服务service热点hot下载download
注册regsiter登录条loginbar按钮btn投票vote
注释note友情链接friend-link外套wrap面包屑bread-crumb
当前的current购物车shop图标icon文本txt
容器containerwrap

💎2 CSS 书写

🌹2.1 空格规范

【强制】 选择器 与 { 之间必须包含空格。

示例: .selector { }

【强制】 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。

示例:color: red;

🌹2.2 选择器规范

【建议】 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。

html" title=css>css">/* 规范 */
#username input {}
.comment .avatar {}/* 不规范 */
.page .header .login #username input {}
.comment div * {}

🌹2.3 属性规范

【强制】 属性定义必须另起一行。

html" title=css>css">/* 规范 */
.selector {margin: 0;padding: 0;
}/* 不规范 */
.selector { margin: 0; padding: 0; }

【强制】 属性定义后必须以分号结尾。

html" title=css>css">/* 规范 */
.selector {margin: 0;
}/* 不规范 */
.selector {margin: 0
}

🌹2.4 大小写规定

html" title=css>css虽然不区分大小写 按照惯例和规定 : 所有html" title=css>css文件中的代码都小写,

html" title=css>css">/* 规范 */
#username input {text-align: center;
}/* 不规范 */
#username input {TEXT-ALIGN: center;
}

🌹2.5 CSS3 兼容前缀

如果使用 CSS3 的属性,如果有必要加入浏览器前缀,则按照

-webkit- / -moz- / -ms- / -o-的顺序进行添加,标准属性写在最后,并且属性名称要对齐,例如:

html" title=css>css">div.animation-demo { -webkit-animation: mymove 5s infinite; -moz-animation: mymove 5s infinite; -o-animation: mymove 5s infinite; animation: mymove 5s infinite;
}

🌹2.6 CSS书写顺序

良好的CSS书写顺序是html" title=前端>前端工程师需要遵守并维护的重要规范

1. 位置属性 display position float overflow z-index list-style clear等可以决定元素渲染位置或层级 以及能够影响其他元素渲染位置或层级的属性
2. 自身属性  width height margin padding border background line-height 等可以影响盒子自身展示的属性
3. 文本属性  color font- text- word- 等作用于文本的样式属性
4. 其他与新增属性 cursor zoom transform box-shadow 等新增属性

原理:

  1. 浏览器解读HTML是从上之下单行解析, 如果没有良好的书写顺序, 例如先解析了 width height 那预渲染的时候 就会从默认位置 (当前文档流左上角) 进行渲染
  2. 如果后续解析到了 位置属性 浏览器需要擦除之前 渲染好的模型 重新根据 渲染基准点(左上角)位置 和层级 进行重绘, 这样导致浏览器会重复解析同一个元素 造成不必要的重绘
  3. 良好的书写顺序是 BAT等一线互联网企业都遵守的CSS书写规范 他可以帮助团队成员协作的时候 迅速排查和后期维护
html" title=css>css">/*正确示范*/
.selector {float: left;width: 150px;font-size: 12px;
}/*错误示范*/
.selector {font-size: 12px;width: 150px;float: left;
}

🌹2.7 链接伪类顺序

链接的样式请严格按照:a:link-> a:visited-> a:hover-> a:active(LV包hao)的顺序添加

🌹2.8 CSS复合写法与单例写法

如果对目标样式的子属性需求小于3时,进行单例写法,避免复合写法造成的computed浪费

当子属性需求大于等于3时,进行复合式写法,避免单例写法过于冗余和字节浪费

html" title=css>css">/*正确示范*/
div {background-color: red;margin: 20px;
}/*错误示范*/
.selector {background: red;margin-top: 20px;margin-bottom: 20px;margin-left: 20px;margin-right: 20px;
}

🌹2.9 布局方式选择

文档流 > 盒子模型距离调整(margin+padding) > 浮动 > 定位

定位元素会脱标并且独立新开文档流层级,高度依赖定位会导致浏览器压力大,并且在后期维护中因为定位元素并不能跟随文档流进行流动,所以维护成本高。

实际开发中 能用文档流+盒子模型处理的布局 轻易不使用浮动 能用浮动处理的布局 不要使用定位 。 只有在最关键的时刻才使用定位进行布局调整。

🌹2.10 定位z-index取值范围

合理规划z-index的取值范围 避免和他人组件层级冲突,需要组内协商

公共头部导航1999 - 2100
banner与二维码等弹出层999 - 1900
页面公共底部1999 - 2100
页面公共组件-1 - 999

http://www.ppmy.cn/news/1424198.html

相关文章

分析ORACLE批量更新中的ORA-00911错误:MyBatis <foreach> 场景与解决方案

分析ORACLE批量更新中的ORA-00911错误&#xff1a;MyBatis 场景与解决方案 引言场景一&#xff1a;非法字符与SQL语句构建场景二&#xff1a;SQL语句结构问题场景三&#xff1a;嵌套参数问题与defaultParameterMap总结 引言 在日常的Java开发过程中&#xff0c;尤其是当我们在使…

车载终端丨车载平板丨车载平板电脑丨提升车队管理水平

随着电商、互联网和智能制造等行业的快速发展&#xff0c;物流需求不断增加&#xff0c;车载终端作为物流企业管理的重要工具&#xff0c;具有广泛的市场需求。车载平板是一种集成了计算机和显示屏的设备&#xff0c;可以用于车辆管理、车队调度、运输监控等方面&#xff0c;可…

C++ 静态成员(一)

一、静态成员变量定义 静态成员变量是属于类的成员变量&#xff0c;而不是属于类的实例的。静态成员变量的特点如下&#xff1a; 所有类的实例共享同一个静态成员变量&#xff0c;只有一份内存空间。静态成员变量在编译时分配内存&#xff0c;直到程序结束时才会被释放。静态…

小例子——Flask网站开发

Flask设计上体现了简约而不失灵活的特点它被归类为微框架&#xff08;microframework&#xff09;&#xff0c;因为它有一个简单的核心&#xff0c;用户可以通过扩展来增加其他功能。以下是一些详细介绍&#xff1a;1. 性能与灵活性&#xff1a;Flask以其高性能、灵活性和可扩展…

机器学习和深度学习常见算法

监督学习算法对比 线性回归&#xff08;Linear Regression&#xff09; vs 支持向量机&#xff08;Support Vector Machine, SVM&#xff09; 线性回归&#xff1a; 特点&#xff1a;简单、易于理解和实现&#xff0c;基于线性假设建立输入和输出之间的关系。应用场景&#…

软考135-上午题-【软件工程】-软件配置管理

备注&#xff1a; 该部分考题内容在教材中找不到。直接背题目 一、配置数据库 配置数据库可以分为以下三类&#xff1a; (1) 开发库 专供开发人员使用&#xff0c;其中的信息可能做频繁修改&#xff0c;对其控制相当宽松 (2) 受控库 在生存期某一阶段工作结束时发布的阶段产…

YOLOv8改进 | Conv篇 | CVPR2024最新DynamicConv替换下采样(包含C2f创新改进,解决低FLOPs陷阱)

一、本文介绍 本文给大家带来的改进机制是CVPR2024的最新改进机制DynamicConv其是CVPR2024的最新改进机制,这个论文中介绍了一个名为ParameterNet的新型设计原则,它旨在在大规模视觉预训练模型中增加参数数量,同时尽量不增加浮点运算(FLOPs),所以本文的DynamicConv被提出…

树莓集团携手国际数字影像产业园代表企业与天府新区信息职业学院达成战略合作

2024年4月16日&#xff0c;树莓科技&#xff08;成都&#xff09;集团有限公司作为国际数字影像产业园的运营方及链主企业&#xff0c;携手园区代表企业成都奇琦汇嘉供应链科技有限公司、成都树莓友品数字技术有限公司&#xff0c;一同前往天府新区信息职业学院进行考察并开展产…