百度前端技术实战训练营——CSS基础之文本样式和简单动画-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_62215764/article/details/128621746

百度前端技术实战训练营——CSS基础之文本样式和简单动画

文本样式

字体大小
font-size 属性设置文本的大小。普通文本（如段落）的默认大小为 16px（16px = 1em，1em 等于当前字体大小）。

p {
	font-size: 16px;
}

字体颜色和背景颜色

颜色由以下值指定：
颜色名 - 如 red
十六进制值 - 如 #ff0000
RGB 值 - 如 rgb(255,0,0)

body {
	background-color: lightgrey;
	color: blue;
}

字体类型

在 CSS 中，有五个通用字体族：
衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。

p {
	font-family: 'Times New Roman', Times, serif;
}

字体粗细
font-weight 属性指定字体的粗细。

p.normal {
	/* 等价 */
	/* font-weight: 400; */
	font-weight: normal;
}

p.thick {
	/* 等价 */
	/* font-weight: 700; */
	font-weight: bold;
}

字体样式
font-style 属性主要用于指定斜体文本。

此属性可设置三个值：
normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为倾斜（倾斜与斜体非常相似，但支持较少）

p.normal {
	font-style: normal;
}

p.italic {
	font-style: italic;
}

p.oblique {
	font-style: oblique;
}

文本对齐

text-align 属性用于设置文本的水平对齐方式。文本可以左对齐或右对齐，或居中对齐。

h1 {
	text-align: center;
}

h2 {
	text-align: left;
}

h3 {
	text-align: right;
}

文本装饰

text-decoration 属性用于设置或删除文本装饰
text-decoration: none; 通常用于从链接上删除下划线
其他 text-decoration 值用于装饰文本

a {
	text-decoration: none;
}
h1 {
	text-decoration: overline;
}

h2 {
	text-decoration: line-through;
}

h3 {
	text-decoration: underline;
}

文本间距
text-indent 属性用于指定文本第一行的缩进
letter-spacing 属性用于指定文本中字符之间的间距
line-height 属性用于指定行之间的间距
word-spacing 属性用于指定文本中单词之间的间距
white-space 属性指定元素内部空白的处理方式。

p {
	text-indent: 50px;
}

h1 {
	letter-spacing: 3px;
}

h2 {
	letter-spacing: -3px;
}

p.small {
	line-height: 0.8;
}

p.big {
	line-height: 1.8;
}

h3 {
	word-spacing: 10px;
}

h4 {
	word-spacing: -5px;
}

p.space {
	white-space: nowrap;
}

文本阴影

text-shadow 属性为文本添加阴影。指定水平阴影（2px），垂直阴影（2px），添加模糊效果（5px），添加颜色（red）。

h1 {
	text-shadow: 2px 2px 5px red;
}

文本溢出

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条，该属性仅适用于具有指定高度的块元素。

overflow 属性可设置以下值：
visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条
overflow-x - 指定如何处理内容的左/右边缘。
overflow-y - 指定如何处理内容的上/下边缘。

$\newline$

简单动画

CSS动画有如下属性：

@keyframes 指定CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式
animation-name 用于绑定元素
要使动画生效，必须将动画绑定到某个元素。下面的例子将 “example” 动画绑定到 <div> 元素。动画将持续 4 秒钟，同时将 <div> 元素的背景颜色从 “red” 逐渐改为 “yellow”：

/* 动画代码 */
@keyframes example {
	from {background-color: red;}
    to {background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）
下面的例子将在动画完成 25％，完成 50％以及动画完成 100％时更改背景颜色和 <div> 元素的位置：

/* 动画代码 */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* 应用动画的元素 */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

animation-delay 属性规定动画开始的延迟时间
下面的例子在开始动画前有 2 秒的延迟：

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

animation-iteration-count 属性指定动画应运行的次数
下面的例子在停止前把动画运行 3 次：

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。
animation-direction 属性可接受以下值：
normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（向后）
alternate - 动画先向前播放，然后向后
alternate-reverse - 动画先向后播放，然后向前
下例将以相反的方向（向后）运行动画：

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-direction: reverse;
}

animation-timing-function 属性规定动画的速度曲线
animation-timing-function 属性可接受以下值：
ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值
下面这些例子展示了可以使用的一些不同速度曲线：

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。
在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。
animation-fill-mode 属性可接受以下值：
none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
下面的例子让 <div> 元素在动画结束时保留来自最后一个关键帧的样式值：

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

animation 属性可以实现动画简写
下例使用六种动画属性：

div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

使用简写的 animation 属性也可以实现与上例相同的动画效果：

div {
    animation: example 5s linear 2s infinite alternate;
}

$\newline$

简单应用

课程案例。
html文件：

<!DOCTYPE html>
<html lang="en">

<head>
	  <meta charset="UTF-8">
	  <meta http-equiv="X-UA-Compatible" content="IE=edge">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <title>CSS样式</title>
	  <link rel="stylesheet" href="./CSS样式.css">
</head>

<body>
	  case 1: 文本样式
	  <p> this is text </p>
	  <br>
	  case 2: 处理溢出样本
	  <p class="ellipse">我要溢出啦啦啦啦</p>
	  <a href="http://www.baidu.com">我是超链接</a>
	  <br>
	  <br>
	  case 3: 简单动画
	  <div class="trans">动画</div>
	  <br>
	  case 3.1 旋转
	  <div class="rotate">旋转</div>
	  <br>
	  case 4: 布局元素
	  <div class="box">box</div>
	  <br>
	  case 5: border属性的其他用法->绘制圆
	  <div class="circle"></div>
	  <br>
	  case 6: 实现导航栏
	  <ul>
		    <li><a href="xx">主页</a></li>
		    <li><a href="xx">课程</a></li>
		    <li><a href="xx">其他</a></li>
	  </ul>
	  <br>
	  case 7: loading动画
	  <div class="loading"></div>
</body>
</html>

css文件：

p {
    /* 辅助框线样式，start */
    width: 200px;
    height: 50px;
    border: 1px solid #a8a8a8;
    /* 辅助框线样式，end */
    text-align: center;
    /* 设置行间距,与height一样可以垂直居中 */
    line-height: 50px;
    /* 字母间距 */
    letter-spacing: 4px;
    /* 单词间距 */
    word-spacing: 20px;
    /* 设置文字颜色 */
    color: red;
    font-size: 15px;
    /* 无衬线字体，即笔画结尾是平滑的字体 */
    font-family: serif;
}

.ellipse {
    width: 100px;
    /* 和normal一样，连续的空白符会被合并，但文本内 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trans {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
    /* X偏移量，Y偏移量，模糊半径，扩散半径，颜色 */
    box-shadow: 10px 10px 5px #888888;
}

.trans:hover {
    width: 300px;
}

.rotate {
    width: 200px;
    height: 100px;
    background-color: yellow;
    transform: rotate(7deg);
}

.box {
    width: 100px;
    height: 100px;
    border: 5px solid green;
    border-bottom: 3px dotted #ff0000;
    border-radius: 10px;
    padding: 10px 20px 30px 50px;
}

.circle {
    width: 100px;
    height: 100px;
    border: 2px solid green;
    border-radius: 50%;
}

ul {
    /* 设置列表元素的marker */
    list-style-type: none;
    display: flex;
}

li a {
    /* 用于设置文本的修饰线外观 */
    text-align: none;
    margin: 10px;
}

.loading {
    width: 35px;
    height: 35px;
    border: 5px solid rgba(189, 189, 189, 0.25);
    border-left-color: rgba(3, 155, 229, 1);
    border-top-color: rgba(3, 155, 229, 1);
    border-radius: 50%;
    animation: rotate 500ms infinite linear;
}

/* 通过在动画序列中定义关键帧的样式来控制CSS动画序列 */
@keyframes rotate {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}