CSS3 动画相关属性实例大全(四)(font、height、left、letter-spacing、line-height 属性)
CSS3 动画相关属性实例大全(四)
(font、height、left、letter-spacing、line-height 属性)
本文目录:
一、font 属性(所有字体属性)
1.1、font-size属性(指定字体的大小)
1.2、font-size-adjust 属性(调整字体大小)
1.3、font-stretch属性(定义字体外观)
1.4、font-weight属性(指定字体的粗细程度)
二、height属性(元素的高度)
三、left属性(元素的左外边距边界与其包含块左边界之间的偏移)
四、letter-spacing属性(字符间距的大小)
五、line-height 属性(设置多行元素的空间量)
一、font 属性(所有字体属性)
font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写,或将元素的字体设置为系统字体
<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>
<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" |
<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>
<div id="animation41"><p>逆境清醒</p>
</div>
改变 font-size 属性:从 font-size: xx-small; 到 font-size: 40px;
1.2、font-size-adjust 属性(调整字体大小)
font-size-adjust属性,通过指定font-size-adjust属性,浏览器将调整字体大小,无论字体系列 这可能会导致改变字体大小。为了防止这种情况,使用的font-size-adjust属性。 所有字体都能有"aspect值",这是小写字母"X"和大写字母"X"的大小差异。 当浏览器知道"aspect值"为第一选择的字体时,浏览器可以找出什么样的font-size使用第二选择字体显示文字。 目前支持的浏览器数量不足,暂不举例 | |
font-size-adjust CSS 属性定义字体大小应取决于小写字母,而不是大写字母。在字体较小时,字体的可读性主要由小写字母的大小决定,通过此选项即可进行调整。 |
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 | 大于默认字体的值 |
<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>
<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" |
<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>
<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)的高度。
<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>
<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的值会被优先设定。
<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>
<div id="animation46">逆境清醒</div>
left属性定义了
定位元素的左外边距边界与其包含块左边界之间的偏移,
非定位元素设置此属性无效。
四、letter-spacing属性(字符间距的大小)
letter-spacing 属性
增加或减少字符间的空白,
表现效果为字符间距的大小
属性值 | 意义 |
normal | 默认。规定字符间没有额外的空间。 |
length | 定义字符间的固定空间(允许使用负值)。 |
inherit | 规定应该从父元素继承 letter-spacing 属性的值。 |
<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>
<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)的高度。
<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>
<div id="animation48"><p>当 你 孤 单 无 助 地 面 对 强 敌 时,谁 会 是 那 个 信 得 过 的 战 友?逆 境 清 醒 送 你 一 只 守 护 兔。</p></div>
改变 line-height 属性:从 line-height: normal;到 line-height: 50px;
未完待续》》》
- 1、CSS3 动画相关属性实例大全(一)(@keyframes ,background属性,border 属性)
- 2、CSS3 动画相关属性实例大全(二)(bottom 、box-shadow、clip、color 、column-count、column-gap、column-rule、column-rule-color、column-rule-width、column-width 属性)
- 3、CSS3 动画相关属性实例大全(三)(columns、filter、flex、flex-basis 、flex-grow、flex-shrink属性)
- 4、CSS3 动画相关属性实例大全(四)(font、height、left、letter-spacing、line-height 属性)
推荐阅读:CSS @规则(At-rules)详解系列索引目录
|
|
|
给照片换底色(python+opencv) | 猫十二分类 | 基于大模型的虚拟数字人__虚拟主播实例 |
|
|
|
计算机视觉__基本图像操作(显示、读取、保存) | 直方图(颜色直方图、灰度直方图) | 直方图均衡化(调节图像亮度、对比度) |
|
|
|
语音识别实战(python代码)(一) | 人工智能基础篇 | 计算机视觉基础__图像特征 |
| ||
matplotlib 自带绘图样式效果展示速查(28种,全) | ||
| ||
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一) | ||
|
|
|
立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦 | Python 3D可视化(一) | 让你的作品更出色——词云Word Cloud的制作方法(基于python,WordCloud,stylecloud) |
|
|
|
python Format()函数的用法___实例详解(一)(全,例多)___各种格式化替换,format对齐打印 | 用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心) | python爱心源代码集锦(18款) |
|
|
|
Python中Print()函数的用法___实例详解(全,例多) | Python函数方法实例详解全集(更新中...) | 《 Python List 列表全实例详解系列(一)》__系列总目录、列表概念 |
|
| |
用代码过中秋,python海龟月饼你要不要尝一口? | python练习题目录 | |
|
|
|
草莓熊python turtle绘图(风车版)附源代码 | 草莓熊python turtle绘图代码(玫瑰花版)附源代码 | 草莓熊python绘图(春节版,圣诞倒数雪花版)附源代码 |
|
| |
巴斯光年python turtle绘图__附源代码 | 皮卡丘python turtle海龟绘图(电力球版)附源代码 | |
|
|
|
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细) | 色彩颜色对照表(一)(16进制、RGB、CMYK、HSV、中英文名) | 2024年6月多家权威机构____编程语言排行榜__薪酬状况 |
|
|
|
手机屏幕坏了____怎么把里面的资料导出(18种方法) | 【CSDN云IDE】个人使用体验和建议(含超详细操作教程)(python、webGL方向) | 查看jdk安装路径,在windows上实现多个java jdk的共存解决办法,安装java19后终端乱码的解决 |
| ||
vue3 项目搭建教程(基于create-vue,vite,Vite + Vue) | ||
|
|
|
2023年春节祝福第二弹——送你一只守护兔,让它温暖每一个你【html5 css3】画会动的小兔子,炫酷充电,字体特 | 别具一格,原创唯美浪漫情人节表白专辑,(复制就可用)(html5,css3,svg)表白爱心代码(4套) | SVG实例详解系列(一)(svg概述、位图和矢量图区别(图解)、SVG应用实例) |
|
|
|
【程序人生】卡塔尔世界杯元素python海龟绘图(附源代码),世界杯主题前端特效5个(附源码) | HTML+CSS+svg绘制精美彩色闪灯圣诞树,HTML+CSS+Js实时新年时间倒数倒计时(附源代码) | 2023春节祝福系列第一弹(上)(放飞祈福孔明灯,祝福大家身体健康)(附完整源代码及资源免费下载) |
|
|
|
tomcat11、tomcat10 安装配置(Windows环境)(详细图文) | Tomcat端口配置(详细) | Tomcat 启动闪退问题解决集(八大类详细) |
相关文章:

CSS3 动画相关属性实例大全(四)(font、height、left、letter-spacing、line-height 属性)
CSS3 动画相关属性实例大全(四) (font、height、left、letter-spacing、line-height 属性) 本文目录: 一、font 属性(所有字体属性) 1.1、font-size属性(指定字体的大小) 1.2、f…...

大模型涌现判定
什么是大模型? 大模型:是“规模足够大,训练足够充分,出现了涌现”的深度学习系统; 大模型技术的革命性:延申了人的器官的功能,带来了生产效率量级提升,展现了AGI的可行路径&#x…...
LeetCode 1456.定长子串中元音的最大数目
题目: 给你字符串 s 和整数 k 。 请返回字符串 s 中长度为 k 的单个子字符串中可能包含的最大元音字母数。 英文中的 元音字母 为(a, e, i, o, u)。 思路:定长滑动窗口 入 更新 出 代码: class Solution {pub…...
freeswitch-esl 三方设备实现监听功能
使用场景: A和B在通话中,C想监听A和B通话内容 方法一: 修改拨号计划<extension name="global" continue="true"><condition><action application="info"/>...

【LeetCode】123.买卖股票的最佳时间
清晰明了的思路是解决问题的至上法宝。如何把一个复杂的问题拆成简单的问题,就是我们需要考虑的。 1. 题目 2. 思想 这道题虽然是难题,但是思想比较简单。 题目要求说至多买卖两次,也就是说,也可以买卖一次,这种情况…...

elk部署安装
elk部署 前提准备1、elasticsearch2、kibana3、logstash 前提准备 1、提前装好docker docker-compose相关命令 2、替换docker仓库地址国内镜像源 cd /etc/docker vi daemon.json # 替换内容 {"registry-mirrors": [ "https://docker.1panel.dev", "ht…...

使用 JAX 进行 LLM 分布式监督微调
LLM distributed supervised fine-tuning with JAX — ROCm Blogs (amd.com) 24年1月25日,Douglas Jia 发布在AMD ROCm 博客上的文章。 在这篇文章中,我们回顾了使用 JAX 对基于双向编码器表示(BERT)的大型语言模型(LL…...

【简单版】通过 Window.performance 实现前端页面(性能)监控
1 背景 前端监控系统告警xx接口fetchError 问题:前端监控系统没有更多的错误信息,查询该fetch请求对应的接口日志返回200状态码、无请求异常记录,且后台能查到通过该fetch请求成功发送的数据。那是前端页面的错误还是前端监控系统的问题&…...

微信小程序考试系统(lw+演示+源码+运行)
摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了微信小程序考试系统的开发全过程。通过分析微信小程序考试系统管理的不足,创建了一个计算机管理微信小程序考试系统的方案。文章介绍了微信小程序考…...

手机摄影入门
感觉会摄影的人是能够从生活中发现美的人。 我不太会拍照,觉得拍好的照片比较浪费时间,而且缺乏审美也缺乏技巧,所以拍照的时候总是拍不好。但有时候还是需要拍一些好看的照片的。 心态和审美可能需要比较长时间提升,但一些基础…...
微信小程序手机号授权获取(aes加密手机号)
<view class="container"> <view class=topTabSwiper> <view class=tab {{currentData == 0 ? "tabBorer" : ""}} data-current = "0" bindtap=checkCurrent>一键授权<span class="tab_bor"><…...

asyn queueRequest使用实例
使用queueRequest读写端口驱动的示例,驱动驱动程序使用一个基于asyn实现了asynCommon和asynOctet的驱动程序-CSDN博客中编写的驱动程序,本程序的C代码如下: #include <stdlib.h> #include <stdio.h> #include <string.h>#…...

关于jmeter设置为中文问题之后无法保存设置的若干问题
1、jemeter如何设置中文模式 Options--->Choose Language--->Chinese(Simplifies), 如此设置后就可显示中文模式(缺点:下次打开还是英文);如下图所示: 操作完成之后: 但是下次重启之后依旧是英文; 2、在jmeter.…...

基于FPGA的信号发生器verilog实现,可以输出方波,脉冲波,m序列以及正弦波,可调整输出信号频率
目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 输出方波 输出脉冲波 输出m随机序列 输出正弦波 2.算法运行软件版本 vivado2019.2 3.部分核心程序 (完整…...
背景全文及翻译
背景 Oracle数据向MySQL同步,没有最新数据,于是在plsql手敲SQL筛选最新数据时,执行报错。 问题描述 通过日期字段筛选最近的数据,我用了类似这样的语句: SELECT * FROM orders WHERE order_date > 2022/01/01;我…...
JAVA地狱级笑话
为什么Java开发者总是不怕黑暗? 因为他们总是有null指针来照亮路。 Java程序员最讨厌的音乐是什么? Garbage Collection旋律,节奏总是让他们烦躁。 为什么Java中的HashMap很擅长社交? 因为它总是能快速找到key对应的朋友。 Java开…...

宝塔PHP8.1安装fileinfo拓展失败解决办法
在宝塔面板中安装PHP8.1后,安装fileinfo扩展一直安装不上,查看日志有报错,于是手动来安装也报错。 宝塔报错: 手动命令行编译安装同,也有报错 cd /www/server/php/81/src/ext/fileinfo/ make distclean ./configure …...
Python 魔术方法
在Python中,魔术方法(Magic Methods)或称为双下划线方法(Dunder Methods),是一类具有特殊用途的方法,其名称前后都带有两个下划线(如 __init__、__str__ 等)。这些方法定…...
03 go语言(golang) - fmt包基本类型
fmt包 在Go语言中,fmt 包是一个非常重要且广泛使用的标准库包,它提供了格式化I/O(输入/输出)功能,类似于C语言中的 printf 和 scanf。通过这个包,你可以读取输入并将数据格式化输出到标准输出或其他写入器…...

Docker本地镜像发布到阿里云镜像服务的简易指南
1 阿里云容器镜像服务 阿里云容器镜像服务(Alibaba Cloud Container Registry,简称ACR)是一个为容器镜像、Helm Chart等云原生资产提供安全托管及高效分发的平台。它支持多架构容器镜像,包括Linux、Windows、ARM等,以…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
FastAPI 教程:从入门到实践
FastAPI 是一个现代、快速(高性能)的 Web 框架,用于构建 API,支持 Python 3.6。它基于标准 Python 类型提示,易于学习且功能强大。以下是一个完整的 FastAPI 入门教程,涵盖从环境搭建到创建并运行一个简单的…...

Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...

华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...