前言

FreeCodeCamp是一个以“帮助人们免费学习编程”为主旨的非营利性组织，其网站收录了众多训练式题目。作为前端入门有较大的帮助。

英文版（源）地址：www.freecodecamp.org/

中文社区：chinese.freecodecamp.org/forum/t/top…

此系列博文为相关知识点记录，算是自己对前端入门的一个回顾。有空还是强烈建议去刷一遍原题+知识点

应用视觉设计

视觉平衡

使用 text-align 属性创建视觉平衡
- text-align: justify;可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。
- text-align: center;可以让文本居中对齐。
- text-align: right;可以让文本右对齐。
- text-align: left;是text-align的默认值，它可以让文本左对齐
使用 width 属性调整元素的宽度
- 属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。
使用 height 属性调整元素的高度

文本特效

使用 strong 标签加粗文本
- 添加了strong标签后，浏览器会自动给元素应用font-weight:bold;。
使用 u 标签给文本添加下划线
- 添加了u标签后，浏览器会自动给元素应用text-decoration: underline;。
使用 em 标签强调文本
- 浏览器会自动给元素应用font-style: italic;，所以文本会显示为斜体。
使用 s 标签给文本添加删除线
- 添加了s标签后，浏览器会自动给元素应用text-decoration: line-through;。
使用 hr 标签创建水平线
- 用hr标签来创建一条宽度撑满父元素的水平线。它一般用来表示文档主题的改变，在视觉上将文档分隔成几个部分。
- 在 HTML 里，hr是自关闭标签，所以不需要一个单独的关闭标签。

颜色调整

调整文本的背景色
- rgba 代表： r = red 红色 g = green 绿色 b = blue 蓝色 a = alpha 透明度//其中 0 代表完全透明，1 代表完全不透明。

大小调整

调整标题与段落的大小
- 标题（h1到h6）的文字应该比的段落的文字大，这样可以让用户更直观的看到页面的布局，同时能区别出不同元素的重要程度，更方便用户捕捉关键的信息。

阴影调整

给卡片元素添加 box-shadow
- box-shadow属性的每个阴影依次由下面这些值描述： offset-x阴影的水平偏移量； offset-y阴影的垂直偏移量; blur-radius模糊距离； spread-radius阴影尺寸；颜色。其中blur-raduis和spread-raduis是可选的。

#thumbnail {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}//这个视觉效果很好

元素调整(透明度,大小写,悬停状态等)

降低元素的 opactiy
- 值 1 代表完全不透明。值 0.5 代表半透明。值 0 代表完全透明。透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。
使用 text-transform 属性给文本添加大写效果
- text-transform属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示，且无需直接改变 HTML 元素中的文本 | Value | Result | | ---------- | ------------ | | lowercase | 小写 | | uppercase | 大写 | | capitalize | Transform Me | | initial | 默认 | | inherit | 使用父元素的 | | none | 不改变 |
设置多个标题元素的 font-size
设置多个标题元素的 font-weight->字体粗细
设置段落文本的 font-size
设置段落的 line-height->行高
调整锚点的悬停状态
- 伪类是可以添加到选择器上的关键字，用来选择元素的指定状态。
- 超链接可以使用:hover伪类选择器定义它的悬停状态样式

a:hover {
  color: blue;
}

元素位置调整

更改元素的相对位置->realative
- 在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型
- 块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。
- 当元素的 position 设置为relative时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量
- CSS 里控制各个方向偏移量的对应的属性是left、right、top和bottom。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems。
使用 CSS 偏移移动相对定位的元素
绝对定位的参照物是元素的父元素->absolute
- absolute相对于其包含块定位。和relative定位不一样，absolute定位会将元素从当前的文档流里面移除，周围的元素会忽略它
- absolute定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是position:relative;）,浏览器会继续寻找直到默认的 body 标签。
固定定位的参照物是浏览器的窗口->->fixed
- fixed定位，它是一种特殊的绝对（absolute）定位，区别是其包含块是浏览器窗口。和绝对定位类似，fixed定位使用 top、bottom、left 和 right 属性来调整元素的位置，并且会将元素从当前的文档流里面移除，其它元素会忽略它的存在。
- fixed定位和absolute定位的最明显的区别是fixed定位元素不会随着屏幕滚动而移动
使用 float 属性将元素左浮动或右浮动->float
- 它通过元素的float属性来设置。浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 通常需要用width属性来指定浮动元素占据的水平空间。
使用 z-index 属性更改重叠元素的位置->z-index
- 当一些元素重叠时，在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。
- z-index的取值是整数，数值大的元素优先于数值小的元素显示。
使用 margin 属性将元素水平居中->margin
- 在应用设计中经常需要把一个块级元素水平居中显示。一种常见的实现方式是把块级元素的margin值设置为auto
- 同样的，这个方法也对图片奏效。图片默认是内联元素，但是可以通过设置其display属性为block来把它变成块级元素
- 通过给页面中的div添加值为auto的margin属性将其居中显示

颜色部分

了解互补色
- 色环是我们认识颜色关系的好工具 - 它是一个近色相邻异色相离的圆环。当两个颜色恰好在色环的两端时，这两个颜色叫做补色。绘画中两只补色在混合后会变成灰色。
了解三原色
将各种元素的颜色调整为互补色
调整颜色的色相
- HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标系中的表示法，描述了色相（hue）、饱和度（saturation）、亮度（lightness）。CSS3 引入了对应的hsl()属性做为对应的颜色描述方式。
- 色相是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。在hsl()里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
- 饱和度是指色彩的纯度，也就是颜色里灰色的占比，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
- 亮度决定颜色的明暗程度，也就是颜色里白色或者黑色的占比，100% 亮度是白色， 0% 亮度是黑色，而 50% 亮度是“一般的”。

.green {
  background-color: hsl(120, 100%, 50%);//满饱和度中等亮度
}

.cyan {
  background-color: hsl(180, 100%, 50%);//蓝绿色
}

.blue {
  background-color: hsl(240, 100%, 50%);
}

调整颜色的色调
- 给纯色添加白色可以创造更浅的色调，添加黑色可以创造更深的色调。另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。
- 饱和度代表灰色的占比，亮度代表白色和黑色的占比。
创建一个 CSS 线性渐变->linear-gradient()
- background里面的linear-gradient()来实现线性渐变
- background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);第一个参数指定了颜色过渡的方向 - 它的值是角度，90deg 代表垂直渐变，45deg 的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序
使用 CSS 线性渐变创建条纹元素->repeating-linear-gradient()
- repeating-linear-gradient()重复指定的渐变。
- 角度就是渐变的方向。起止渐变颜色值代表渐变颜色及其宽度值，由颜色值和起止位置组成，起止位置用百分比或者像素值表示。
- 如果每对起止渐变颜色值的颜色都是相同的，由于是在两个相同的颜色间过渡，那么中间的过渡色也为同色，接着就是同色的过渡色和下一个起止颜色，最终产生的效果就是条纹。

//产生条纹色
div{
  border-radius: 20px;
  width: 70%;
  height: 400px;
  margin:  50 auto;
  background: repeating-linear-gradient(
    45deg,
    yellow 0px,
    yellow 40px,
    black 40px,
    black 80px
  );
}

背景图添加

通过添加细微图案作为背景图像来创建纹理
- background属性支持使用url()函数通过链接的方式引入一个指定纹理或样式的图片。图片链接地址在括号内，一般会用引号包起来。

body {
  background: url("https://i.imgur.com/MJAkxbh.png");
}

更改元素(transform)

使用 CSS Transform scale 属性可以更改元素的大小

#ball2 {
  left: 65%;
  transform: scale(1.5);
}

使用CSS Transform scale 属性在悬停时缩放元素
- transform属性有很多函数，可以对元素进行调整大小、移动、旋转、翻转等操作。当使用伪类描述元素的指定状态如:hover时，transform属性可以方便的给元素添加交互。
使用 CSS Transform skex 属性沿X轴倾斜元素 transform: skewX(24deg);
使用 CSS Transform skex 属性沿Y轴倾斜元素->skewY
使用 CSS 创建一个图形
- blur-radius => 模糊半径，spread-radius => 辐射半径，transparent => 透明的，border-radius => 圆角边框。

//新月形状
.center
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;

  background-color: transparent;
  border-radius: 50%;
  box-shadow: 25px 10px 0px 0px blue;
}

使用 CSS 和 HTML 创建更复杂的形状
- :before和:after伪类。这些伪类用来在选择元素之前和之后添加一些内容
- :before和:after必须配合content来使用。这个属性通常用来给元素添加内容诸如图片或者文字。当:before和:after伪类用来添加某些形状而不是图片或文字时，content属性仍然是必需的，但是它的值可以是空字符串。

//心形
.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform: rotate(-45deg);
}
.heart:after {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart:before {
  content: "";
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}

关于伪类后面再mark一下学习好了.

动画

了解 CSS 的关键帧和动画是如何工作的
- animation属性控制动画的外观，@keyframes规则控制动画中各阶段的变化。总共有 8 个animation属性
- animation-name设置动画的名称，也就是要绑定的选择器的@keyframes的名称。animation-duration设置动画所花费的时间。
- @keyframes能够创建动画。创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。具体是通过设置动画期间对应的“frames”的 CSS 的属性，以百分比来规定改变的时间，或者通过关键词“from”和“to”，等价于 0% 和 100%。打个比方，CSS 里面的 0% 属性就像是电影里面的开场镜头。CSS 里面的 100% 属性就是元素最后的样子，相当于电影里的演职员表或者鸣谢镜头。CSS 在对应的时间内给元素过渡添加效果

#rect {
  animation-name: rainbow;
  animation-duration: 4s;

}
@keyframes rainbow {
  0% {
    background-color: blue;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: yellow;
  }
}

使用CSS动画更改按钮的悬停状态

button:hover {
  animation-name: background-color;
  animation-duration: 500ms;
}
@keyframes background-color{
  100%{
    background-color: #4791d0;
  }
}

修改动画的填充模式
- 我们想要的效果是按钮在悬停时始终高亮。
- 这可以通过把animation-fill-mode设置成forwards来实现。animation-fill-mode指定了在动画结束时元素的样式
使用 CSS 动画创建运动

@keyframes rainbow {
  0% {
    background-color: blue;
    top: 0px;
  }
  50% {
    background-color: green;
    top: 50px;
  }
  100% {
    background-color: yellow;
    top: 0px;
  }
}

通过从左到右淡化元素来创建视觉方向

@keyframes fade {
  50% {
    left: 60%;
    opacity: 0.1;
  }
}//从左到右渐隐

使用无限的动画计数制作永不停止的动画
- animation-iteration-count，这个属性允许你控制动画循环的次数
- 如果想让动画一直运行，可以把值设置成 infinite。
使用无限的动画计数制作 CSS 心跳

//心脏跳动背景渐变代码
<style>
  .back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation-name: backdiv;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }

  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
    animation-name: beat;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  .heart:after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart:before {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }

  @keyframes backdiv {
    50% {
      background: #ffe6f2;
    }
  }

  @keyframes beat {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(0.6) rotate(-45deg);
    }
  }

</style>
<div class="back"></div>
<div class="heart"></div>

以可变速率来给元素添加动画

//星星闪烁效果
@keyframes twinkle {
    20% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

以可变速率来给多个元素添加动画
以可变速率来给多个元素添加动画
- animation-timing-function规定动画的速度曲线
- 速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。如果要描述的动画是一辆车在指定时间内（animation-duration）从 A 运动到 B，那么animation-timing-function表述的就是车在运动中的加速和减速等过程。
- 比如，默认的值是ease，动画以低速开始，然后加快，在结束前变慢。其它常用的值包括ease-out，动画以高速开始，以低速结束;ease-in，动画以低速开始，以高速结束；linear，动画从头到尾的速度是相同的。
学习贝塞尔曲线的原理
- 用cubic-bezier来定义贝塞尔曲线。曲线的形状代表了动画的速度。曲线在 1*1 的坐标系统内，曲线的 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。
- cubic-bezier函数包含了 1 * 1 网格里的4个点：p0、p1、p2和p3。其中p0和p3是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。在 CSS 里面通过(x1, y1, x2, y2)来确定p1和p2
- animation-timing-function: cubic-bezier(x1, y1, x2, y2)

实际上就是绘制(0, 0)到(1, 1)的曲线, 通过设置p1(x1, y1)和p2(x2, y2)来确定曲线形状, 而这个曲线又是与速度相关的 animation-timing-function: cubic-bezier(0, 0, 0.58, 1);//先快后慢

使用贝塞尔曲线让运动更加自然
- 虽然贝塞尔曲线是在 1*1 的坐标系统内 x 值只能在 0 到 1，但是 y 值是可以大于 1 的 animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);//模拟杂耍球函数

动画部分小结

animation-name: 绑定@keyframes元素
animation-duration: 动画持续时间
animation-iteration-count: infinite;动画重复次数
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649)||ease||linear||ease-out||ease-in
animation-fill-mode: forwards;始终悬停
@keyframes twinkle {
    20% {//表示在什么状态执行什么效果
      transform: scale(0.5);//变换大小
      opacity: 0.5;//变换透明度
    }
  }

FreeCodeCamp学习点总结-UI部分

前言

应用视觉设计

视觉平衡

文本特效

颜色调整

大小调整

阴影调整

元素调整(透明度,大小写,悬停状态等)

元素位置调整

颜色部分

背景图添加

更改元素(transform)

动画

动画部分小结