css3动画学习笔记

2021 年 7 月 14 日

1. 行间属性 placeholer 可以实现 input 属性聚焦消失文字
2. input::placeholer 可以改变 input 中文字的颜色
3. ::selection 可以改变选择文本样式的底色还有文字选中颜色及文字阴影颜色，及可以设置 color、background-color、text-shadow 的属性
4. 伪类选择器是被选中元素的一种状态
5. :not（标签属性）选中除了括号中标签的元素属性的所有
6. 根标签选择器:root 表示 html 里面的根节点，和 html 表示一个意思
7. :targer 目标标签，可以改变一个被选中目标标签的状态
8. :first-child 选出子元素的第一个元素；:last-child 选出子元素的最后一个元素；注意：选中的元素只要是父标签的子元素都会被选中
9. :only-child 拥有唯一的子元素
   10:nth-child（公式如 2n+1）选择出公式中的子元素，2n+1 中的 n 是从第 0 位开始差数的
10. first-of-type{}选择出第一个子元素，last-of-type{}选择出最后一个子元素
11. only-of-tyle{}选择出唯一的一个子元素，子元素内可以有不同的元素
12. nth-of-type()从指定的位置开始查询，括号中可以填公式 n 是从第 n 个开始查找；nth-of-last-type()倒着查询
13. :empty 没有任何元素的子元素
14. :checked 点击多选产生效果
    16:enabled{}表示能用的的 input 的输入文本框；:disable{}表示将 input 文本输入框失效不能够输入
15. css 中的 calc 属性，可以写在需要计算尺寸的冒号后面，calc 括号中可以填入简单的公式计算尺寸，算数符号两边必须得加上空格，否则无法计算
16. box-shadow 用来设置边框阴影如果没有指明就是外阴影，冒号后第一个参数是水平偏移量，第二个参数是垂直偏移量，第三个参数是阴影的模糊范围，第四个参数是阴影大小
17. box-shadow 内部阴影， 第一个参数写 inset
18. 背景颜色在阴影的下面，文字在阴影的上面
    2021 年 7 月 16 日
19. border-image-source:url()添加元素边框背景图片
20. border-imgage-slice: 像素值（不用写 px）是将 border 边框图片切割成上下左右八块，然后后将图片放在 border 的相应位置，其中冒号后面的四个像素值就是 4 条切割线的位置
21. border-image-outset:像素:将 border 边框图片进行延伸，可以将边框背景图片延伸到边框以外
22. border-image-width:像素：显示 border 边框图片的宽度
23. border-image-repeat：stretch(默认拉升)、round（先拉升到拉伸图片大小足够在进行平铺）、repeat(平铺加载出来半个图片也会平铺出来)、space（先用空白进行填充，当图片可以加载出来在进行平铺）
24. 其中 border-image:source slice repeat；可以写在一起
25. background
    -image:linear-gradient();表示静向渐变括号中填入颜色会以线性渐变
26. background-origim:boder-box/padding-box/content-box,分别表示背景图从哪个位置开始
27. background-clip:border-box/content-box/padding-box/text,表示从哪开始截断不在显示
28. background-clip:text，表示用背景图替换文字那部分，但是必须是谷歌游览器才有，所以要配合-webkit-text-fill-color:transparent;进行使用
29. background-repeat:可以添 repeat-x，repeat-y,进行水平和垂直平铺，；两个方向同时平铺用 round
30. background-attachment📜改变背景图片定位，相对于游览容器定位，会跟着容器走
31. background-attachment:local：将背景图片设置成相对于内容区进行定位，会跟着内容走
32. background-attachment:fixed:将背景图片设置成相对于游览器窗口进行定位，不跟着内容也不跟滑动条走
33. background-size:cover;会让一张图片完完整整的填充容器，不改变图片的原始比例，可能 hi 溢出容器
34. background-size:contain;会在不改变一张图片的比例下让一张图片完整的填充容器，不会溢出，如果容器大了会让图片有留白
35. background-image:linear-gradient(角度 deg，颜色 1 像素 1，颜色 2 像素 2)，线性渐变颜色，其中 deg 表示度，从颜色 1 从像素 1 开始渐变到颜色 2 像素 2 结束
36. background-image:radial-gradient(角度、形状，颜色 1 占比，颜色 2 占比),放射性渐变色，角度形状
37. text-shadow:像素 1，像素 2，像素 3，颜色，对文字进行阴影设置
38. transition:all 数字 s；表示在数字 S 中动态过度改变，动态效果的属性
39. -webkit-text-stroke:描边的粗细 描边的颜色;文字描边效果
40. 引入外部字体包，@font-face{font-family:名称；src：url（） }
41. column-width:文字的文本宽度，column-gap:分割文字的宽度
42. 触发 IE6b 混杂模式盒模型要写上 box-sizing:border-box;
43. overflow:auto;溢出内容出现滚动条，不溢出不出现滚动条
44. 配合 overflow 属性使用的 resize:both；让用户调节属性大小
45. 弹性盒子的表示方法 display:flex/inline-flex;
46. flex-direction:row(主轴：从左往右)/row-reverse(对齐方式与 row 相反)/column(主轴：纵向从上往下排列)/column-reverse(对齐方式与 column 相反);
47. flex-wrap:wrap;弹性盒子换行
48. justify-content:flex-start:弹性盒子元素将向行起始位置对齐。
49. justify-content:flex-end：弹性盒子元素将向行结束位置对齐。
50. justify-content:center:弹性盒子元素将向中间位置对齐。
51. justify-content:space-between:弹性盒子元素会平均地分布在行里。
52. justify-content:space-around:弹性盒子项目则平均分布，并确保两两之间的空白空间相等。
53. align-items:flex-start;弹性盒子元素将向列起始位置对齐。
54. align-items:flex-end：弹性盒子元素将向列结束位置对齐。
55. align-items:center:弹性盒子元素将向中间位置对齐。
56. align-items:baseline;根据元素内容对齐
57. align-items:stretch;如果没有设置子元素高度，此属性会将子元素高度撑开
58. align-content:center;进行多行居中
59. order:数字;默认数字为 0,其中数值约小元素位置越靠前
60. align-self:flex-start/flex-end/center/baseline;设置给子元素，子元素的位置
61. flex-grow:1;设置给子元素，将父元素剩余的空间按照比例瓜分给子元素
62. flex-basis:像素;可以覆盖掉 width 的值，区别 width:当填写英文内容超出 width 宽度则英文内容会溢出，当 flex-basis 中英文内容超出宽度则会将盒子撑宽，但是同时设置 width 和 flex-basis 时，width 设置元素的上限，flex-basis 设置元素的下线
63. flex-shrink:比例;将子级元素超出的范围按照比例缩进，公式：宽度比例+宽度比例=总和；宽度多出来的比例/总和宽度（都是内容区的大小）
64. transition 过度动画
65. transition-property:属性；监听到底变化哪个属性的值，属性值中填 all 是所有过度属性都添加
66. transition-duration:秒；动画多少秒来完成
67. transition-timing-function:linear（运动状态过度函数）;过渡的运动状态
68. transition-delay:秒;等多少秒在执行过度
69. 绘制贝塞尔曲线：transition:all 1s cubic-bezier(0,0,1,1);三次贝塞尔曲线 transition-timing-function;
70. CSS3 动画：animation 的用法
    （1）先定义容器@keyframes 自定义名{
    状态改变内容，例如：
    0%/from{ } 25%{ } 50%{ } 75%{ } 100%/to { }
    }
    （2）animation:自定义名 时间；不同属性同时进行动画 ： animation:自定义名 1 时间 1 ，自定义 2 时间 2 ；
71. animation:自定义名 时间 cubic-bezier(0,0,1,1)定义的是每一段的动画状态 时间（等多少秒在执行动画） 数值/infinite[永久循环]（动画执行的次数） reverse(让动画倒着进行) alternate(往返运动，但运动次数大于 1) forwards(设置最后一针的状态，让其在动画截至的时候保存最后一针的状态)/both（在动画开始之前为开始之前的状态，在动画结束保留最后一针的状态）
72. 用 animation 中的 steps（1，end/start)来代替 cubic-bezier(0,0,1,1)则不会产生过度,其中 end 是保留当前帧状态，直到动画时间结束，start 保留下一帧状态，直到这段动画时间结束
73. 旋转角度 transform:rotate(度数 deg)
74. transform-origin:像素 像素，确定旋转中心点，这个点是相对当前元素
75. perspective:像素；设置 3D 效果，像素是设置人眼到元素的距离
76. transform-style:preserve-3d;增强眼睛看到的 3D 效果
77. transform:rotate3d(x,y,z,angle);/rotatex/rotatey，旋转特效，x,y，z 旋转的角度 angle
78. scale( x,y)伸缩、扩张，伸缩的是此元素变化坐标轴的刻度
79. skew(度数 deg,度数 deg)将元素按照 x,y 轴倾斜
80. transform:translatez(像素)/translatex(像素)/translatey(像素)向三维坐标的 z、x、y 轴移动像素
81. perspective:像素；景深，需要设置到父级上子级才能有景深的效果，还有一种是 transform:perspective(像素):是写在元素自身的景深，他是不能设置眼睛看到的角度，和在父级设置的景深不同时在子级元素设置的景深所有的角度都是一样的
82. perspective-origin:像素 像素；配合景深 perspective 使用，是眼睛看到的角度可以写 center center
83. transform-origin:像素 1 像素 2 像素 3;确定旋转的空间中心
84. backface-visibility:hidden；影藏照片墙背面
85. matrix(1,0,0,1,e,f)=>自定义元素的动画变换，主要方法较复杂需要查看渡一课程，css3 中的 6-12 节的内容
86. 性能优化 css3 由于 transform 会直接作用 DOM 节点数，想要在非渲染层启用 GPU 来进行优化程序可以在 transfrom 后加上 translatex/y/z/3D，启用 GPU 进行优化
87. 标准 GPU 加速处理的属性：will-change:transform;告诉游览器独立出一个层面处理 transfrom
    2021 年 7 月 29 日
88. dpr = 物理像素/css 像素
89. 将页面大小 根据分辨率不同进行相应的调节以展示给用户的大小感觉上差不多
90. 分布式响应，用 link 引入外部 css 样式，在 link 中设置属性 media="(max-width:375px)则应用 css 样式，例如: 当屏幕尺寸大于 375px 时则引用 index. css 样式
91. 分布式响应（媒体查询）的第二种方法用@import “index. css” screen and (max-width:375px);当屏幕像素大于 375px 时用引入 index. css 样式
92. 分布式响应第三种方法直接在 css 中进行分布式响应，@media and screen(屏幕类型)（max-width:375px）{属性内容}；不占用权重，一般放在最后，and 表示与“，”逗号表示或
93. @media not screen and (max-width: 375px){ }表示除了 375px 所有的屏幕像素
94. vw/vh 是将视口分成了 100 分，vmax/vmi 取视口宽高中最大或最小的值分成 100 份
    2021 年 7 月 30 日（html5）
95. input 使用方法
    (1)input 中的 placeholer 属性可以实现 input 文本框在不输入文字显示底纹，当鼠标聚焦则底纹消失
    (2)form 表单中的用来制作日期选择
    (3)进行日期填写
    (4)对某年第几周进行选择
    (5)将日期选择与时间选择进行结合，能选择日期及时间
    (6)限制输入文本框只能填入数字 （兼容性不好）
    (7)限制输入文本框只能输入邮箱地址
    (8)选择颜色
    (9)input type=“range” min=“最小值” max=“最大值” name = “range”> 这是一个选择条，可以设置最小和最大值，同时提交之后 range 性会记录提交的值
    (10)在提交过后会记录提交内容共下次输入选择
    (11)只能填写 url 地址进行提交
96. contenteditable =“false/true”,这个属性可以填在有文本的元素上，默认属性是 false 不会有任何变化，当设置成 true 时就可以更改元素中的文字内容，这个属性是可以继承的
97. 元素上的属性 draggable=“true”;实现元素拖拽功能
    （1）拖拽开始（ondragstart),拖拽进行（ondrag),拖拽结束（ondragrend）
    （2)被拖拽的物体，目标区域
    [1]其中 draggable 在 js 中有三个时间 ondragstart 事件，这个事件会在拖拽开始开始移动触发一次（物体按下的瞬间不会触发事件）；ondrag 是拖拽途中触发的事件会记录拖拽途中的数据，ondragend 是在拖拽结束触发的事件，三个时间都有形参 e 是记录拖拽相关数据，其中 e. clientX/e. clientY 表示鼠标所在位置
    [2]拖拽目标元素使用 ondragenter 事件，当元素鼠标进入拖拽目标区域进行触发（不是元素图形进入触发）
    [3]拖拽目标元素使用 ondragover 事件，当元素鼠标进入拖拽目标区域不停进行触发（和 ondrag 差不多)
    [4]拖拽事件元素使用 ondraleave 事件，当元素鼠标离开拖拽区域后触发事件
    [5]拖拽事件元素使用 ondrop 事件，当鼠标放下触发事件，但是由于事件都会回到默认值，而 ondragover 和 ondrop 又产生冲突，使用 ondrop 事件需要组织 ondragover 事件在其中加上 e. preventDefault（）;这样 ondrop 事件就能够触发
    2021 年 7 月 31 日
98. 语义化标签 header 头部,footer 底部，导航 nav
99. 语义化标签
    文章<–可以直接被引用拿走–>，
    段落
100. 画板,这个标签设置画板大小要设置在行间，同时需要在 js 中设置画笔，var ctx = can. getContext(“2d”)，这是在 2d 平面建立一个 ctx 画笔，调用画笔 ctx. moveTo（坐标 x，坐标 y）这是起点；ctx. linTo（坐标 x,坐标 y)这是连接起点坐标；ctx. closePath（）；将连续的画闭合 ；ctx. stroke()；结束
101. ctx. lineWidth 可以设置画出线条的粗细
102. 在同一个画图中开一个新画需要使用 ctx. beginPath()；
103. ctx. fill()；填充将图形填满
104. 画一个矩形 ctx. strokeRect(100[x 点坐标]，100[y 点坐标],100[宽]，100[高])；画一个填充的矩形 ctx. fillRect(100,100,200,100);将整个动画清屏用 ctx. clearRect(100[x 点坐标]，100[y 点坐标],100[宽]，100[高])
     2021 年 8 月 1 日
105. 在 js 中角的弧度表示为 Math. l 表示 180 度的角
106. 用 canvas 标签画圆及扇形，用法：ctx. arc(原心（x,y），半径（r），弧度（起始弧度，结束弧度），方向(顺时针 0，逆时针 1))
107. 画圆角矩形，ctx. moveTo(x，y);ctx. arcTo(B 坐标 x,B 坐标 y，c 坐标 x,c 坐标 y，弧度数值)
108. 二次贝塞尔曲线 ctx. quadraticCurveTo(1 坐标 x,1 坐标 y,2 坐标 x,2 坐标 y)；三次贝塞尔曲线 ctx. bezierCurveTo(1 坐标 x,1 坐标 y,2 坐标 x,2 坐标 y,3 坐标 x,3 坐标 y)
109. 旋转 ctx. rotate(Math. PI)；围绕坐标原点旋转 180 度
110. 坐标系位移，移动画板坐标轴，ctx. translate(x 坐标,y 坐标)设置坐标原点
111. 缩放 ctx. scale(2,1),这个是放在画图前面的，意思是 x 轴是原来的两倍，y 轴不变
112. 平移、旋转和缩放是作用在全局上的，如果设置了 canvas 标签上的所有图形都会被作用上，可以在画板开头使用 ctx. seve()函数记录初始样式，在设置其他样式后，让不需要平移、旋转缩放的图形上使用 cxt. restore()；进行恢复
113. 给画板矩形填充颜色 ctx. fillRect(x 轴，y 轴，宽，高)；ctx. fillStyle = “颜色”;
114. 给画板矩形填充图片背景，构造 var img = new image();然后 var bg = ctx. createPatten(img,“no-repeat”);最后 ctx. fillStyle = bg ;注意图片填充是按照画板的坐标系进行的需要用 ctx. translate（x,y）设置原点坐标
115. 对画板设置线性渐变色，var bg = ctx. createLinearGradient(像素 1，像素 2，像素 3，像素 4)；var 一个渐变的方向；bg. addColorStop(0,“颜色 1”)；bg. addColorStop(1,“颜色 2”);设置关键帧进行颜色渐变；ctx. fillStyle = bg;画板设置颜色,但是颜色也是作用在坐标系上的
116. 放射性渐变 bg = ctx. createRadialGradient(开始 x 轴，开始 y 轴，半径 1，结束 x 轴，结束 y 轴，半径 2)；
117. 设置画板阴影，ctx. shadowColor = “颜色”,设置阴影颜色，ctx. shadowBlur = 像素；设置阴影的像素大小，ctx. shadowOffsetX/Y = 像素；设置阴影便宜方向及偏移大小
     10，在 canvas 画板上绘制文本，使用 ctx. font = "像素 文字字体"可以设置画板中的像素大小及文字字体，用 ctx. strokeText(“文字内容”，像素 1，像素 2)设置描边文字内容及位置，ctx. fillText(“文字内容”,像素 1，像素 2)设置内容文字及文字位置
118. 设置两线交汇 ctx. lineJoin = “miter”；round 圆角，bevel 切平，miter 尖锐，设置 miter 的时候可以设置 ctx. miterLimit =数值，可以设置 miter 的尖锐值
119. 给线段两端加“小帽子”ctx. lineCap = butt(默然)、square(小方块)、round(半圆的小帽子)
120. SVG 矢量图，放大不会失真，适合大面积的贴图，通常动画较少或者较简单，标签和 css 去画。 Canvas 适用于小面积的绘图，适合动画
121. SVG 画直线

<svg width="500px" height="300px" style="border :1px solid ">
	<line x1="100" y1="100" x2="200" y2="200">
		画直线，从（100，100）画到 (200,200)
	</line>
	<rect height="50" width="100" x="0" y="0" rx="10圆角为10" ry="0y轴圆角为0">
		画矩形
	</rect>
</svg>

122. 给 svg 标签中 line 元素加 css 样式可以设置线条颜色 stroke、线条宽度 stroke-width.
123. 给 svg 标签 line 元素画圆和椭圆：<circle r=“半径” cx=“圆心 x 轴” cy= “圆心 y”,画椭圆 <ellipse rx = “半径 1” ry =“半径 2” cx = “圆心 x 轴” cy=“圆心 y 轴”
124. 在 svg 属性中的不填充是 css 样式 fill:transparent;
125. 给 svg 属性添加折线， 默然折线是填充效果，需要变成折线效果需要设置填充并且给边界加上颜色,不会做收尾相连
126. 给 svg 属性添加多边形
127. 给 svg 添加文字用 标签
128. svg 折线中的属性-透明度：stroke-opacity:. 5;边框透明度设为百分之五十；fill-opacity:. 5;填充设为百分之五十
129. 给 svg 的折线两端设置“小帽子”：stroke-linecap:butt(默然)、square(小方块)、round(半圆的小帽子);
130. 给 svg 折线设置交汇属性：stroke-linejion:round 圆角，bevel 切平，miter 尖锐
131. svg 画线<path d="M 100 100 L 200 100 L 200 100> M 是起始点，L 是连接点，如果 L 小写就是相对位置 l 100 200 表示先向 x 轴移动 100 像素再向 y 轴移动两百像素
132. svg 画线,<path d="M 100 100 H 200 V200 z> 表示 M 是起点坐标,H 是向横向到 200 ，V 表示竖着到 200，如果是小写则是相对位置是相对于当前点走多少距离,Z 表示闭合区间
     2021 年 8 月 3 日（第 28 节)
133. 给 svg 画弧用
134. svg 线性渐变

     <defs>
     <linearGradient id="bg1" x1 = "0" y1="0" x2="100%" y2="100%">
     <stop offset="0%"(关键帧) style="stop-color:rgb(255,255,0)"></stop>
     <stop offset="100%"（关键帧） style="stop-color:rgb(255,0,0)"></stop>
     </linearGradient>
     引用线性渐变<rect x="100" y="100" height="100" widht="200" style="fill:url(#bg1)"(引用渐变)></rect>
     </defs>

135. 高斯滤镜

     <defs>
     <fillter id ="Gaussian">
     <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
     </feGaussianBlur>
     </defs>

 引用高斯滤镜<rect x="100" y="100" height="100" width="200" style="fill:url(#Gaussian)"></rect>

136. 设置虚线给 svg 实线添加 CSS 样式 stroke-dasharray：10px;可以添加 3 个参数来调节虚线中的间距；设置虚线偏移 stroke-dashoffset:10px;向左偏移 10 像素
137. svg 属性中的比例尺，在 svg 中添加属性 view="0,0,250,150"表示在 svg width=“500px” height="300px"放大一倍，表示用 250 和 300 代替原来的宽高并将宽高设置为 500、300
138. 音频播放用只能播放音频不能播放视频
139. 视频播放用<video src="视频地址"controls(自带的控制条)>
     (1). 在设置播放时需要在 js 中选中 video 标签并打点调用. play（）；此时点击相应标签就能播放视频;属性中判断是否已经播放为 video. paused 为已经播放,暂停为 video. pause()
140. 获取 video 中视频总的时间 video. duration；获取当前的播放时间 video. currentTime;
     2021 年 8 月 4 日
141. video. playbackRate = 倍数；这个属性可以调节视频的倍数
142. video. volume = 0 到 1 之间;设置视屏音量
143. 设置全屏要先 var dom = document. getElement;然后给 dom。requestFullscreen()；
     2021 年 8 月 9 日
144. Math. atan(x,y),x 轴 Y 轴坐标与圆心连线到 X 轴正方向的角度
145. getBoundingClientRect()盒模型信息对象：left:0；top:0;bottom:0;right:0;width:0;height:0;