CSS3 动画相关属性实例大全（四)（font、height、left、letter-spacing、line-height 属性）

CSS3 动画相关属性实例大全（四)

（font、height、left、letter-spacing、line-height 属性）

本文目录：

[一、font 属性（所有字体属性）](#一、font 属性（所有字体属性）)

1.1、font-size属性（指定字体的大小）

[1.2、font-size-adjust 属性（调整字体大小）](#1.2、font-size-adjust 属性（调整字体大小）)

1.3、font-stretch属性（定义字体外观）

1.4、font-weight属性（指定字体的粗细程度）

二、height属性（元素的高度）

三、left属性（元素的左外边距边界与其包含块左边界之间的偏移）

四、letter-spacing属性（字符间距的大小）

[五、line-height 属性（设置多行元素的空间量）](#五、line-height 属性（设置多行元素的空间量）)

一、font 属性（所有字体属性）

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体

css 复制代码

<style> 
#animation40 {
    border: 1px solid black;
    width: 150px;
    height: 150px;
    -webkit-animation: animation40a 2s infinite; 
    animation: animation40a 2s infinite;
}

@-webkit-keyframes animation40a
   { 50% {font: 25px bold; }}
@keyframes animation40a
   { 50% {font: 25px bold; }}
</style>

css 复制代码

<div id="animation40">
  <p>font 属性是所有字体属性的简写</p>
</div>

改变 font 属性：font: 25px bold

|-----------------------|---------------------------|
| 值 | Font 特性描述 |
| font-style | 规定字体样式。 |
| font-variant | 规定字体异体 |
| font-weight | 规定字体粗细。 |
| font-size/line-height | 规定字体尺寸和行高。 |
| font-family | 规定字体系列。 |
| caption | 定义被标题控件（比如按钮、下拉列表等）使用的字体。 |
| icon | 定义被图标标记使用的字体。 |
| menu | 定义被下拉列表使用的字体。 |
| message-box | 定义被对话框使用的字体。 |
| small-caption | caption 字体的小型版本。 |
| status-bar | 定义被窗口状态栏使用的字体。 |

1.1、font-size属性（指定字体的大小）

font-size CSS 属性指定字体的大小。

因为该属性的值会被用于计算 em 和 ex 长度单位，定义该值可能改变其他元素的大小

|------------------------|------------------------------------------------------------------------------------------------------------------------------------------|
| font-size属性（指定字体的大小） | |
| <absolute-size>绝对大小值 | font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; |
| <relative-size>相对大小值 | font-size: larger; font-size: smaller; |
| <length>长度值 | font-size: 12px; font-size: 0.8em; |
| <percentage>百分比值 | font-size: 80%; font-size:250%，font-size:200% font-size: inherit; |
| JavaScript 语法： | object.style.fontSize="larger" |

css 复制代码

<style> 
#animation41 {
    border: 1px solid black;
    width: 200px;
    height: 100px;
    font-size: xx-small;
    color: purple;
    -webkit-animation: animation41a 2s infinite; 
    animation: animation41a 2s infinite;
    }
@-webkit-keyframes animation41a
    { 50% {font-size: 40px;}}
@keyframes animation41a
    { 50% {font-size: 40px; }}
</style>

css 复制代码

<div id="animation41">
  <p>逆境清醒</p>
</div>

改变 font-size 属性：从 font-size: xx-small; 到 font-size: 40px;

1.2、font-size-adjust 属性（调整字体大小）

1.3、font-stretch属性（定义字体外观）

|-------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------|
| Chrome浏览器 | |
| font-stretch 属性 | 为字体定义一个正常或经过伸缩变形的字体外观，这个属性并不会通过伸展/缩小而改变字体的几何外形，如font-feature-settings和font-variant属性，它仅仅意味着当有多种字体可供选择时，会为字体选择最适合的大小。 |
| normal | 指定默认字体 |
| semi-condensed, condensed, extra-condensed, ultra-condensed | 小于默认字体，其中 ultra-condensed 是缩的最小的字体 |
| semi-expanded, expanded, extra-expanded, ultra-expanded | 大于默认字体的值 |

css 复制代码

<style>

@font-face {
  src: url('fonts/LeagueMonoVariable.ttf');
  font-family:'LeagueMonoVariable';
  font-style: normal;
  font-stretch: 1% 500%; /* Required by Chrome */
}

.container {  font: 1.5rem 'LeagueMonoVariable', sans-serif;}

.condensed {  font-stretch: 50%;}

.normal {  font-stretch: 100%;}

.expanded {  font-stretch: 200%;}

<style>

css 复制代码

<div class="container">
  <p class="condensed">LeagueMonoVariable</p>
  <p class="normal">LeagueMonoVariable</p>
  <p class="expanded">LeagueMonoVariable</p>
</div>

1.4、font-weight属性（指定字体的粗细程度）

font-weight CSS 属性指定了字体的粗细程度。

一些字体只提供 normal 和 bold 两种值。

|----------------|------------------------------------------|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 100~900 | 定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。 |
| inherit | 规定应该从父元素继承字体的粗细。 |
| JavaScript 语法： | object.style.fontWeight="900" |

css 复制代码

<style>
    #animation44 {
        border: 1px solid black;
        width: 200px;
        height: 200px;
        font-weight: lighter;
        color: purple;
        font-size: 40px;
        -webkit-animation: animation44a 2s infinite;
        animation: animation44a 2s infinite;
    }
@-webkit-keyframes animation44a
        { 50% {font-weight: bolder;}}
@keyframes animation44a
        { 50% {font-weight: bolder; }}
</style>

css 复制代码

<div id="animation44" style="text-align:center;">
  <p>逆境清醒</p>
</div>

改变 font-weight属性：从 font-weight: lighter;到 font-weight: bolder;

二、height属性（元素的高度）

height CSS 属性指定了一个元素的高度。

默认情况下，这个属性决定的是内容区（ content area）的高度，

但是，如果将 box-sizing 设置为 border-box ,

这个属性决定的将是边框区域（border area）的高度。

css 复制代码

    <style>
        #animation45 {
            width: 150px;
            height: 50px;
            background: #CCCCFF;
            border: 1px solid #000000;
            -webkit-animation: animation45a 2s infinite;
            animation: animation45a 2s infinite;
        }
        @-webkit-keyframes animation45a
         {  50% {height: 200px;}        }
        @keyframes animation45a
        {    50% {height: 200px;}        }
    </style>

css 复制代码

    <div id="animation45" style="text-align:center;">
        <p>逆境清醒</p>
    </div>

改变 height属性：从height: 50px;到 height: 200px;

三、left属性（元素的左外边距边界与其包含块左边界之间的偏移）

left属性定义了

定位元素的左外边距边界与其包含块左边界之间的偏移，

非定位元素设置此属性无效。

left的效果取决于元素的position属性：

当position设置为absolute或fixed时，left属性指定了定位元素左外边距边界与其包含块左边界之间的偏移。
当position设置为relative时，left属性指定了元素的左边界离开其正常位置的偏移。
当position设置为sticky时，如果元素在 viewport 里面，left属性的效果和 position 为relative等同；如果元素在 viewport 外面，left属性的效果和 position 为fixed等同。
当position设置为static时，left属性无效。
当left和right 同时指定时，元素的位置会被重复指定。当容器是从左到右时，left的值会被优先设定；当容器是从右到左时，right的值会被优先设定。

css 复制代码

    <style>
        #animation46 {
           top:80px;
            width: 100px;
            height:50px;
            margin: auto;
            border: 2px solid #111111;
            background-color:lightblue;
            color:black;
            -webkit-animation: animation46a 1s infinite; 
            animation: animation46a 1s infinite;
        }
        @-webkit-keyframes animation46a
        { 50% {left: 620px;} }
        @keyframes animation46a
        { 50% {left: 620px;} }
    </style>

css 复制代码

<div id="animation46">逆境清醒</div>

left属性定义了

定位元素的左外边距边界与其包含块左边界之间的偏移，

非定位元素设置此属性无效。

四、letter-spacing属性（字符间距的大小）

letter-spacing 属性

增加或减少字符间的空白，

表现效果为字符间距的大小

|---------|---------------------------------|
| 属性值 | 意义 |
| normal | 默认。规定字符间没有额外的空间。 |
| length | 定义字符间的固定空间（允许使用负值）。 |
| inherit | 规定应该从父元素继承 letter-spacing 属性的值。 |

css 复制代码

    <style>
        #animation47 {
            width: 200px;
            height: 300px;
            border: 1px solid black;
            background-color: lightblue;
            color: black;
            letter-spacing: normal;
            -webkit-animation: animation47a 1s infinite;
            animation: animation47a 1s infinite;
        }

        @-webkit-keyframes animation47a {
            50% {letter-spacing: 20px; }
        }

        @keyframes animation47a {
            50% { letter-spacing: 20px; }
        }
    </style>

css 复制代码

 <div id="animation47"><p>当 你 孤 单 无 助 地 面 对 强 敌 时，谁 会 是 那 个 信 得 过 的 战 友？逆 境 清 醒 送 你 一 只 守 护 兔。</p></div>

etter-spacing 属性：

增加或减少字符间的空白，表现效果为字符间距的大小

改变 letter-spacing 属性：从 letter-spacing: normal;到 letter-spacing: 20px;

五、line-height 属性（设置多行元素的空间量）

line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。

对于块级元素，它指定元素行盒（line boxes）的最小高度。

对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

css 复制代码

    <style>
        #animation48 {
            width: 200px;
            height: 250px;
            border: 1px solid black;
            background-color: lightblue;
            color: black;
            line-height: normal;
            -webkit-animation: animation48a 1s infinite;
            animation: animation48a 1s infinite;
        }
        @-webkit-keyframes animation48a {
            50% {line-height: 50px;  } }
        @keyframes animation48a {
            50% {line-height: 50px; } }
    </style>

css 复制代码

<div id="animation48"><p>当 你 孤 单 无 助 地 面 对 强 敌 时，谁 会 是 那 个 信 得 过 的 战 友？逆 境 清 醒 送 你 一 只 守 护 兔。</p></div>

改变 line-height 属性：从 line-height: normal;到 line-height: 50px;

未完待续》》》

推荐阅读：CSS @规则(At-rules)详解系列索引目录****

|-----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------|
| | | |
| | | |
| 给照片换底色（python+opencv） | 猫十二分类 | 基于大模型的虚拟数字人__虚拟主播实例 |
| | | |
| 计算机视觉__基本图像操作（显示、读取、保存） | 直方图（颜色直方图、灰度直方图） | 直方图均衡化（调节图像亮度、对比度） |
| | | |
| 语音识别实战（python代码）(一） | 人工智能基础篇 | 计算机视觉基础__图像特征 |
| | | |