css 视觉应用
使用text-align属性创建视觉平衡
文本通常是Web内容的很大一部分。CSS有几个选项，用于将其与text-align属性对齐。
- text-align: justify 左右对其，使除最后一行以外的所有文本行与行框的左右边缘相交。
- text-align: center 居中对其，使文本居中
- text-align: right 右对齐文本
- text-align: left 将文本左对齐(默认)
h4 {
text-align:center;
}
p {
text-align:justify;
}
使用width属性调整元素的宽度
您可以使用widthCSS中的属性指定元素的宽度。
值可以相对长度单位（例如em），绝对长度单位（例如px）或包含其父元素的百分比形式给出。
这是一个将图像的宽度更改为220px的示例：
img {
width: 220px;
}
使用height属性调整元素的高度
您可以使用heightCSS中的width属性（类似于该属性）来指定元素的高度。
这是一个将图像的高度更改为20px的示例：
img {
height: 20px;
}
使用strong标签使文本变为粗体
要使文本变为粗体，可以使用strong标签。这通常用于引起人们对文本的注意并象征它很重要。使用strong标签，浏览器将CSS应用于font-weight: bold元素。
<strong>lean CSS</strong>
使用u标记在文本下划线
要在文本下划线，可以使用u标签。这通常用于表示一段文字很重要，或需要记住的内容。使用u标签，浏览器将CSS应用于text-decoration: underline元素。
<u>JunCode</u>
使用em标记将文字倾斜
要倾斜文本，可以使用em标签。当浏览器将CSS应用于font-style: italic元素时，这会将文本显示为斜体。
<em>JunCode</em>
使用s标签删除文本
若要删除文本，即当一条水平线横切字符时，可以使用s标签。它表明一段文字不再有效。使用s标签，浏览器将CSS应用于text-decoration: line-through元素。
<s>delete code</s>
使用hr元素创建一条水平线
您可以使用hr标签在其包含元素的宽度上添加一条水平线。这可用于定义主题更改或在视觉上分隔内容组。
该hr标签应当出现在标题和段落之间。
<h4>test hr label</h4>
<hr>
<p>content</p>
调整文本的背景颜色属性
无需调整整体背景或文本的颜色以使前景易于阅读，您可以在包含background-color要强调的文本的元素中添加a。使用rgba可以调整颜色的透明度，该值的范围值1~0；
h4 {
text-align: center;
background-color:rgba(45,45,45,0.1);
padding:10px;
}
调整页眉和段落标签的大小
标题标签（h1至h6）的字体大小通常应大于段落标签的字体大小。这使用户更容易从视觉上理解页面上所有内容的布局和重要性级别。您可以使用该font-size属性来调整元素中文本的大小。
设置h4标签大小为27像素：
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size:27px;
}
添加阴影
该box-shadow属性将一个或多个阴影应用于元素。
该box-shadow属性采用以下值
- offset-x （将阴影从元素水平推到多远），
- offset-y （将阴影从元素垂直推到多远），
- blur-radius 阴影的模糊半径
- spread-radius 阴影的扩散半径
- color 阴影的颜色
该blur-radius和spread-radius值是可选的。
可以使用逗号分隔每个box-shadow元素的属性来创建多个框阴影。
这是CSS的示例，用于创建具有一些模糊度的多个阴影，且阴影大多为透明的黑色：
#thumbnail{
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
减少元素的不透明度
opacityCSS中的属性用于调整项目的不透明度，或者相反。
- 值1是不透明的，根本不是透明的。
- 值为0.5表示半透明。
- 值0是完全透明的。
给定的值将应用于整个元素，无论是具有一定透明度的图像，还是一块文本的前景色和背景色。
.links {
text-align: left;
color: black;
opacity:0.7;
}
使用text-transform属性使文本大写
text-transformCSS中的属性用于更改文本的外观。这是一种确保网页上的文本一致显示的便捷方法，而无需更改实际HTML元素的文本内容。
| 值 | 效果 |
|---|---|
| lowercase | 小写："transform me" |
| uppercase | 大写："TRANSFORM ME" |
| capitalize | 首字母大写："Transform Me" |
| initial | 使用默认值 |
| inherit | 使用text-transform父元素中的值 |
| none | 默认值：使用原始文本 |
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
text-transform:uppercase;
}
设置多个标题元素的字体大小
该font-size属性用于指定文本在给定元素中的大小。此规则可用于多个元素，以创建页面上文本的视觉一致性。
设置font-size的h1标签68px。
设置font-size的h2标签52px。
设置font-size的h3标签40px。
设置font-size的h4标签32PX。
设置font-size的h5标签21px。
设置font-size的h6标签14px的。
<style>
h1{
font-size:68px;
}
h2{
font-size:52px;
}
h3{
font-size:40px;
}
h4{
font-size:32px;
}
h5{
font-size:21px;
}
h6{
font-size:14px;
}
</style>
设置多个标题元素的字体粗细
该font-weight属性设置文本部分中粗字符或细字符的大小。
设置font-weight的的h1标签800。
设置font-weight的的h2标签600。
设置font-weight的的h3标签500。
设置font-weight的的h4标签400。
设置font-weight的的h5标签300。
设置font-weight的的h6标签200。
<style>
h1 {
font-size: 68px;
font-weight:800;
}
h2 {
font-size: 52px;
font-weight:600;
}
h3 {
font-size: 40px;
font-weight:500;
}
h4 {
font-size: 32px;
font-weight:400;
}
h5 {
font-size: 21px;
font-weight:300;
}
h6 {
font-size: 14px;
font-weight:200;
}
</style>
设置段落文本的字体大小
font-size属性不限于标题，它可以应用于包含文本的任何元素。
<style>
p{
font-size:16px;
}
</style>
设置段落的行高
CSS提供了line-height用于更改文本块中每行高度的属性。顾名思义，它改变了每行文本获得的垂直空间量。
line-height在p标签中添加一个属性，并将其设置为25px。
p {
font-size: 16px;
line-height:25px;
}
调整锚标签的悬停状态
这将涉及伪类的用法。伪类是可以添加到选择器中的关键字，以选择元素的特定状态。
例如，可以使用:hover伪类选择器针对锚标记的悬停状态更改其样式。这是CSS，color可在其悬浮状态下将a标签的颜色更改为红色：
<style>
a {
color: #000;
}
a:hover{
color:red;
}
</style>
更改元素的相对位置
CSS将每个HTML元素视为自己的框，通常称为CSS Box Model。块级项目自动从新的行开始（请考虑标题，段落和div），而内联项目位于周围的内容（如图像或跨度）之内。这种方式下元素的默认布局称为文档的常规流程，但是CSS提供了position属性来覆盖它。
当元素的位置设置为时relative，它允许您指定CSS 在页面正常流程中应用相对于其当前位置移动元素。它与left,right,top的CSS偏移属性配对bottom。这些参数表示将项目从通常放置的位置移开的像素数，百分比或em 。
下面的示例将段落从底部移开10个像素：
p {
position: relative;
bottom: 10px;
}
将元素的位置更改为相对不会将其从常规流程中移除-元素周围的其他元素仍然会像该项目处于其默认位置一样工作。
** 注意：**定位为您提供了很大的灵活性，并增强了页面的视觉布局。最好记住，无论元素的位置如何，底层的HTML标记都应组织得井井有条，并且在从上到下读取时都有意义。这是视障用户（依靠屏幕阅读器等辅助设备）访问您的内容的方式。
创建渐变CSS线性渐变
在HTML元素上应用颜色不仅限于一种纯色。CSS提供了在元素上使用颜色过渡（也称为渐变）的功能。可通过background属性的linear-gradient()函数进行访问。
以下是一般语法：
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
第一个参数指定颜色过渡开始的方向-可以表示为度，其中90deg构成垂直渐变，而45deg像反斜杠一样成角度。以下参数指定渐变中使用的颜色的顺序。
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
使用CSS线性渐变创建条纹元素
该repeating-linear-gradient()功能非常类似于linear-gradient(),它重复指定的梯度图案。repeating-linear-gradient()接受各种值。第一个是渐变的角度，后面的是渐变的颜色；
如果每两个颜色停止值都是相同的颜色，则混合不会很明显，因为它是在相同的颜色之间，然后硬过渡到下一个颜色，因此最终会出现条纹。
background: repeating-linear-gradient(
90deg,
yellow 0px,
blue 40px,
green 40px,
red 80px
);
通过添加细微图案作为背景图像来创建纹理
向背景添加纹理和趣味并使其脱颖而出的一种方法是添加微妙的图案。关键是平衡，因为您不希望背景突出太多，并远离前景。
该background属性支持该url()功能，以便链接到所选纹理或图案的图像。链接地址用括号括在引号中。
<style>
body {
background:url(https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png);
}
</style>
使用CSS变换比例属性更改元素的大小
要更改元素的比例，CSS具有transform属性及其scale()功能。下面的代码示例将页面上所有段落元素的大小加倍：
p {
transform: scale(2);
}
使用CSS Transform缩放属性在悬停时缩放元素
该transform属性具有多种功能，可让您缩放，移动，旋转，倾斜等元素。当与伪类（例如:hover指定元素的特定状态）一起使用时，该transform属性可以轻松地向元素添加交互性。
这是一个示例，当用户将鼠标悬停在段落元素上时，它们会将段落元素缩放到其原始大小的2.1倍：
p:hover {
transform: scale(2.1);
}
使用CSS变换属性skewX沿X轴倾斜元素
该transform属性的下一个功能是skewX()，它将所选元素沿其X（水平）轴倾斜给定程度。
以下代码使段落元素沿X轴倾斜-32度。
p {
transform: skewX(-32deg);
}
使用CSS变换属性skewY沿Y轴倾斜元素
假设skewX()函数将选定元素沿X轴倾斜给定程度，则该skewY()属性使元素沿Y（垂直）轴倾斜也就不足为奇了。
top使用该transform属性，将ID为-10度的元素沿Y轴倾斜。
#top {
background-color: red;
transform:skewY(-10deg);
}
使用CSS创建图形
通过操纵不同的选择器和属性，可以制作有趣的形状。较容易尝试的一种是新月形。对于此挑战，您需要使用box-shadow设置元素阴影的border-radius属性以及控制元素角的圆度的属性。
您将创建一个带有透明阴影的圆形透明对象，该阴影稍微偏向侧面-该阴影实际上就是您看到的月亮形状。
为了创建圆形对象，border-radius应将属性设置为50％的值。
你可以从更早的挑战还记得，box-shadow属性取值offset-x，offset-y，blur-radius，spread-radius和颜色的顺序值。该blur-radius和spread-radius值是可选的。
<style>
.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 0 0 blue;
}
</style>
<div class="center"></div>
使用CSS和HTML创建更复杂的形状
心形是世界上最受欢迎的形状之一，在这一挑战中，您将使用纯CSS创建一个形状。但是首先，您需要了解::before和::after伪元素。这些伪元素用于在选定元素之前或之后添加内容。
在以下示例中，使用::before伪元素将矩形添加到具有类的元素heart：
.heart::before {
content: "";
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -50px;
left: 5px;
}
为了使::before和::after伪元素正常运行，它们必须具有已定义的content属性。此属性通常用于将照片或文字之类的内容添加到所选元素。当使用::before和::after伪元素制作形状时，content仍然需要该属性，但会将其设置为空字符串。在上面的示例中，类别为的元素heart具有一个::before伪元素，该伪元素生成一个分别具有height和width的黄色矩形,像素分别为50px和70px。由于矩形的边框半径为25％，因此该矩形具有圆角，并且绝对位于距元素的5px left和上方的50px top。
将屏幕上的元素转换为心脏。在heart::after选择器中，将更background-color改为粉红色，将更border-radius改为50％。
接下来，使用类heart（just heart）定位元素并填写transform属性。在rotate()-45度下使用该功能。
最后，在heart::before选择器中，将其content属性设置为空字符串。
心形的完整代码：
<style>
.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;
}
</style>
<div class="heart"></div>
@keyframes 动画
要为元素设置动画，您需要了解动画属性和@keyframes规则。动画属性控制动画的行为方式，@keyframes规则控制该动画过程中发生的情况。共有八个动画属性。这一挑战将使其变得简单，并首先涵盖两个最重要的挑战：
animation-name设置动画的名称，该名称随后用于@keyframes告诉CSS哪些规则与哪些动画一起使用。
animation-duration 设置动画的时间长度。
@keyframes如何精确指定动画在整个持续时间内会发生什么。这是通过在动画过程中为特定“帧”提供CSS属性来完成的，百分比范围从0％到100％。如果将它与电影进行比较，则0％的CSS属性是元素在开幕场景中的显示方式。100％的CSS属性是元素在积分显示前的最后如何显示。然后CSS运用魔法在给定的持续时间内过渡元素以演绎场景。这是一个示例，用于说明@keyframes和动画属性的用法：
#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
对于具有animid 的元素，上面的代码段将设置为animation-name，colorful并将设置animation-duration为3秒。然后，@keyframes规则将链接到名称为的动画属性colorful。它将在动画开始时将颜色设置为蓝色（0％），在动画结束时将颜色转换为黄色（100％）。您不仅限于开始到结束过渡，还可以将元素的属性设置为0％到100％之间的任何百分比。
使用CSS动画更改按钮的悬停状态
您可以使用CSS @keyframes更改处于悬停状态的按钮的颜色。
这是在悬停时更改图像宽度的示例：
<style>
img:hover {
animation-name: width;
animation-duration: 500ms;
}
@keyframes width {
100% {
width: 40px;
}
}
</style>
<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
请注意，ms代表毫秒，其中1000ms等于1s。
按钮保持突出显示状态。
请注意动画经过后如何重置500ms，从而使按钮恢复为原始颜色。您希望按钮保持突出显示状态。
可以通过将该animation-fill-mode属性设置为来完成forwards。该animation-fill-mode指定样式应用到一个元素时，动画结束。您可以这样设置：
animation-fill-mode: forwards;
使用CSS动画创建运动
当已指定的元素position，诸如fixed或relative的CSS偏移性right，left，top，和bottom可以在动画规则用于创建运动。
如下例所示，您可以通过将关键帧的top属性设置50%为50px 来先下推项目，然后将第一个（0%）和最后一个100%关键帧的属性设置为0px 。
@keyframes rainbow {
0% {
background-color: blue;
top: 0px;
}
50% {
background-color: green;
top: 50px;
}
100% {
background-color: yellow;
top: 0px;
}
}
通过从左到右淡化元素来创建视觉方向
在显示的动画中，具有渐变背景的圆形元素根据@keyframes规则向右移动动画的50％标记。
以id为的元素作为目标，并在处ball添加opacity设置为0.1 的属性50%，以便该元素在向右移动时逐渐消失。
@keyframes fade {
50% {
left: 60%;
opacity:0.1;
}
使用无限的动画计数连续对元素进行动画处理
先前的挑战涉及如何使用某些动画属性和@keyframes规则。的另一个动画属性是animation-iteration-count，它允许您控制要遍历动画的次数。
这是一个例子：
animation-iteration-count: 3;
在这种情况下，动画将在运行3次后停止，但是可以通过将该值设置为infinite来使动画连续运行。
下面是一个持续运动的例子：
<style>
#ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes bounce{
0% {
top: 0px;
}
50% {
top: 249px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
</style>
<div id="ball"></div>
使用无限动画计数制作CSS心跳
一秒长的心跳动画由两个动画片段组成。使用属性可以对heart元素（包括:before和:after进行动画处理）以更改大小，使用transform属性可以对背景div进行动画处理以更改其颜色background。
<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>
以可变速率对元素进行动画处理
有多种方法可以更改类似动画元素的动画速率。到目前为止，这是通过应用animation-iteration-count属性和设置@keyframes规则来实现的。
为了说明这一点，右侧的动画由两个“星星”组成，每个星星的大小和不透明度在@keyframes规则中的20％标记处减小，从而创建了闪烁动画。您可以更改@keyframes其中一个元素的规则，以使星星以不同的速率闪烁。
<style>
.stars {
background-color: white;
height: 30px;
width: 30px;
border-radius: 50%;
animation-iteration-count: infinite;
}
.star-1 {
margin-top: 15%;
margin-left: 60%;
animation-name: twinkle-1;
animation-duration: 1s;
}
.star-2 {
margin-top: 25%;
margin-left: 25%;
animation-name: twinkle-2;
animation-duration: 1s;
}
@keyframes twinkle-1 {
50% {
transform: scale(0.5);
opacity: 0.5;
}
}
@keyframes twinkle-2 {
20% {
transform: scale(0.5);
opacity: 0.5;
}
}
#back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
}
</style>
<div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
以可变速率对多个元素进行动画处理
在上一个挑战中，您通过更改两个相似动画元素的@keyframes规则来更改了它们的动画速率。您可以通过操纵animation-duration多个元素来实现相同的目标。
在代码编辑器中运行的动画中，天空中有三个“星星”以连续循环的相同速率闪烁。要使它们以不同的速率闪烁，可以animation-duration为每个元素将属性设置为不同的值。
设置animation-duration的元件的与类star-1，star-2和star-3为1秒，0.9S，和1.1s，分别。
<style>
.stars {
background-color: white;
height: 30px;
width: 30px;
border-radius: 50%;
animation-iteration-count: infinite;
}
.star-1 {
margin-top: 15%;
margin-left: 60%;
animation-duration: 1s;
animation-name: twinkle;
}
.star-2 {
margin-top: 25%;
margin-left: 25%;
animation-duration: 0.9s;
animation-name: twinkle;
}
.star-3 {
margin-top: 10%;
margin-left: 50%;
animation-duration: 1.1s;
animation-name: twinkle;
}
@keyframes twinkle {
20% {
transform: scale(0.5);
opacity: 0.5;
}
}
#back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
}
</style>
<div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
<div class="star-3 stars"></div>
使用关键字更改动画时间
在CSS动画中，该animation-timing-function属性控制动画元素在动画持续时间内变化的速度。如果动画是在给定的时间animation-duration中从A点移动到B点animation-timing-function的汽车，则说明汽车在行驶过程中如何加速和减速。
有许多可用于流行选项的预定义关键字。例如，默认值是ease，它开始缓慢，在中间加速，然后在最后再次减速。其他选项包括ease-out，它在开始时很快，然后放慢速度，，ease-in在开始时很慢，然后结束时加快，或者linear，则始终采用恒定的动画速度。
用于与ID的元素ball1和ball2，添加animation-timing-function属性的，并设置#ball1到linear和#ball2到ease-out。请注意，元素在动画期间如何移动但最终在一起之间的差异，因为它们共享animation-duration2秒的相同时间。
<style>
.balls {
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#ball1 {
left:27%;
animation-timing-function:linear;
}
#ball2 {
left:56%;
animation-timing-function:ease-out;
}
@keyframes bounce {
0% {
top: 0px;
}
100% {
top: 249px;
}
}
</style>
<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>
了解贝塞尔曲线如何工作
最后一个挑战是引入animation-timing-function属性和一些关键字，这些关键字可以在动画持续时间内改变动画的速度。CSS提供了除关键字之外的其他选项，可通过使用Bezier曲线对动画的播放方式进行更精细的控制。
在CSS动画中，贝塞尔曲线与cubic-bezier函数一起使用。曲线的形状表示动画的播放方式。曲线位于1乘1的坐标系上。此坐标系的X轴是动画的持续时间（将其视为时间标度），Y轴是动画中的变化。
该cubic-bezier功能包括坐这个1 1格四个要点：p0，p1，p2``和p3。p0和p3已为您设置-它们是始终分别位于原点（0，0）和（1，1）的起点和终点。您可以为其他两个点设置x和y值，并将它们放置在网格中的位置指示动画要遵循的曲线形状。这是在CSS通过声明的X和Y值完成p1，并p2`在形式“锚”点：(x1, y1, x2, y2)。综上所述，这是CSS代码中贝塞尔曲线的示例：
nimation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
在上面的示例中，每个点的x和y值是相等的（x1 = 0.25 = y1和x2 = 0.75 = y2），如果您还记得几何类，则会得出一条从原点延伸到点（1 ，1）。此动画是元素在动画过程中的线性变化，与使用linear关键字相同。换句话说，它以恒定的速度变化。
对于ID为的元素ball1，将animation-timing-function属性的值从linear更改为其等效的cubic-bezier函数值。使用上面示例中给出的点值。
#ball1 {
left: 27%;
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
