开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS -打字机动画，宽度等于内容

CSS - 打字机动画，宽度等于内容

CSS（层叠样式表）是一种用于描述网页样式和布局的标记语言。它可以控制网页的字体、颜色、大小、间距、背景等各种样式效果，使网页更加美观和易于阅读。

打字机动画是一种通过CSS动画效果模拟打字机输入文本的效果。通过逐个显示字符，然后逐个删除字符，再逐个显示下一个字符，以此类推，可以给用户带来一种逐步展示内容的动态效果。

实现打字机动画的关键是使用CSS的动画属性和关键帧（@keyframes）规则。通过定义逐步改变文本的透明度或位置等属性，可以实现逐个显示和删除字符的效果。

以下是一个示例代码，实现了一个打字机动画效果，并使宽度等于内容：

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: black; }
}

.typewriter {
  overflow: hidden; /* 隐藏超出宽度的内容 */
  border-right: .15em solid black; /* 光标效果 */
  white-space: nowrap; /* 不换行 */
  margin: 0 auto; /* 居中显示 */
  animation: typing 3s steps(40, end), blink-caret .75s step-end infinite;
}

</style>
</head>
<body>

<h1 class="typewriter">Hello, World!</h1>

</body>
</html>

在上述代码中，我们使用了@keyframes规则定义了两个动画：typing和blink-caret。typing动画控制宽度从0到100%的变化，实现逐个显示字符的效果；blink-caret动画控制光标的闪烁效果。

通过将typewriter类应用于<h1>标签，我们可以使其中的文本具有打字机动画效果，并且宽度等于内容。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云CSS样式表服务：https://cloud.tencent.com/product/css
腾讯云动画服务：https://cloud.tencent.com/product/animation

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS侧边栏宽度不动(更改页面宽度时)，内容区宽度自适应

一个页面，左栏是内容栏content，右栏是侧边栏sidebar。如何使侧边栏宽度不动(更改页面宽度时)，内容区宽度自适应呢？...为了保证内容区宽度自适应，先不设定其宽度，使其填充整个DIV区域，设定足够大小的右外边距，左浮动。侧边栏使用负margin，设置一定的负值左外边距，使其浮动到实现设定好的空白右外边距的地方。

3.4K5 0

【CSS3】CSS3 动画 ⑤ ( 动画速度曲线 | 设置动画步长 | 动画匀速执行 | 动画分 2 步执行 | 使用动画步长实现打字机效果 )

一、动画速度曲线设置 CSS3 样式中 , 设置动画速度曲线的属性是 animation-timing-function 属性 ; animation-timing-function 属性定义了动画从...初始 CSS 样式变为结束状态时所消耗的时间 ; animation-timing-function 属性常用属性值如下 : linear : 动画在整个执行过程中速度都是匀速的 ; ease...200 像素宽度 ; 2、代码示例 - 动画分 2 步执行核心代码是 : animation: progress 4s steps(2) forwards; 该动画的名称是 progress ,..., 没有任何效果 ; 执行 2 秒后 , 执行第一步 , 盒子模型变为 100 像素 ; 执行 4 秒后 , 执行结束 , 盒子模型变为 200 像素 ; 三、代码示例 - 使用动画步长实现打字机效果...---- 实现思路 : 在盒子模型中 , 设置 10 个文字 : 实现一个打字机效果吧动画的效果是盒子模型从 0 到 200 像素 , 每个文字 20 像素 ;

3714 0

用纯 CSS 实现文本打字机效果，一定很酷！

打字机效果很容易创建 打字机效果很容易制作，要理解本文，你需要掌握CSS和CSS动画的基本知识。...首先我们来解释一下打字机效果的实现方式: 打字机动画将通过使用CSS steps()函数一步一步地将文本元素的宽度从0更改为100%，从而显示文本元素。一个闪烁动画将使光标动起来。...我们将使用@keyframes CSS动画实现这个效果: @keyframes typing { from { width: 0 } to { width: 100% } } 正如所看到的，所有这些动画所做的只是将元素的宽度从...但是要注意不要过于依赖它，因为使用CSS动画有一些限制。请确保在一系列设备和视口大小上测试您的打字机文本，因为结果可能因平台而异。...因为你可以用纯CSS做一些事情，并不一定意味着你应该这样做。如果打字机效果对您很重要，并且希望将其用于更关键的内容，那么至少也应该考虑JavaScript解决方案。

2.8K1 0

CSS 当宽度为百分比的时候，如何让高等于宽

说明： 1、将盒子的宽度设置为自己需要的百分比，这里以 16% 为例； 2、将盖盒子的高度设置为 100%； 3、通过伪类控制高度 ul li::before{ content: ""; padding-top...: 100%; vertical-align: middle; display: block;} 4、盒子里面的内容一定要定位，如例子中的 span ul li span{ position: absolute... translate(-50%, -50%); transform: translate(-50%, -50%);} 5、这样就实现了，无论设备的分辨率怎么变化，这个盒子始终都是正方形的宽度啦...DOCTYPE html> ...DOCTYPE html>

2.9K3 1

打字机效果的实现与应用

前言在 web 应用中，模拟编辑器或者模拟输入框中文字啪啦啪啦输入的效果，往往能够吸引人们的眼球，让用户的注意力聚焦在输入的内容上，其实使用的是 web 动画模拟打字机效果，本文将和大家探讨打字机效果的实现方式以及应用...纯 css 实现最简单的方式是莫过于直接使用 CSS 。大概思路是借助 CSS3 的 @keyframe 动画来不断改变包含文字的容器的宽度，超出容器部分的文字隐藏不展示。...可以看到其实现原理很简单，打字效果其实就是改变容器的宽度实现的。...优点是简单，缺点也是有的，首先我们要先获得文本的宽度，上面的截图就是因为宽度写错了，导致光标在文字后面，然后只支持 1 行。若想要支持多行，就得使用 JavaScript 了。...以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。

2.5K2 0

【CSS】盒子模型内边距 ④ ( 盒子模型内部尺寸计算 - 内容尺寸、内边距、边框宽度 | 盒子模型尺寸 = 内容尺寸 + 内边距 + 边框宽度 )

大小是固定的 , 设置的 width 和 height 是多少 , 内容尺寸就是多少 ; 如 : 下面的 CSS 样式中 , 设置 div 尺寸为 200 x 200 像素 , 那么内容尺寸就是该大小...盒子模型样式的时候 , 要提前计算好内容尺寸内边距边框宽度外边距这四个值 , 其中的内容尺寸 + 内边距 + 边框宽度最终得到的才是盒子模型的宽度 ; 二、代码示例 ---- 1、盒子模型扩展尺寸示例...: 10 像素 ; 盒子模型的宽度 = 内容宽度 200px + 右内边距 10px + 左内边距 50px + 边框宽度 10px * 2 = 280px ; 盒子模型的高度 = 内容高度 200px... 盒子模型内部尺寸计算 <style type="text/<em>css</em>...像素 ; 总体盒子模型尺寸 : 200 x 200 像素 ; 盒子模型的<em>宽度</em> = <em>内容</em><em>宽度</em> x + 右内边距 10px + 左内边距 50px + 边框<em>宽度</em> 10px * 2 = 200px ; 计算出<em>内容</em><em>宽度</em>

1K3 0

CSS3知识点整理&&一些demo

（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height...-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。...这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。...inherit 使元素继承父元素的盒模型模式 content-box的width是定义内容区域的宽度，然后border、padding什么的，都在内容区域外，导致整个盒子的宽度变大。...border-box的width是定义整个盒子的宽度，所以在border、padding相同的情况下，内容宽度会变小。

6372 0

容器查询 cqw 和 CSS 数学函数 max

瑕疵在于，当时的 CSS 技术，其实没法判断当前文本内容长度是否超过了其容器宽度，导致即便文本没有没有超长，Hover 上去也会进行一个来回滚动，像是这样：容器查询 cqw 和 CSS 数学函数 max...1cqw 等于容器宽度的 1%。假设容器宽度是 1000px，则此时 1cqw 对应的计算值就是 10px。 cqh 容器查询高度（Container Query Height）占比。...取 cqw 和 cqh 中较大的一个本文，我们会运用到其中的 cqw，1cqw 等于容器宽度的 1%。那么，当前容器的宽度，其实就是 100 cqw。...其实我们的关键不是谁大谁小，而是：如果当前容器的宽度（也就是文本宽度）大于父容器宽度，需要得到一个动画位置值如果当前容器的宽度（也就是文本宽度）小于父容器宽度，无需动画，也就是动画位移值为 0 那么...，正常展示文本内容超过容器的情况，内容可以进行跑马灯来回滚动展示也就是如下的效果：完整的代码，你可以戳这里：Pure CSS Marquee 当然，硬要说的话，本方案还是存在一个缺陷，就是动画的时长是固定的

1.5K3 0

纯CSS实现的文字效果还可以这么酷炫!

前言 CSS是一门很特殊的语言，你认为CSS只能用来控制网页的结构与样式，但只要你有丰富的想象力，就能创造无限可能。...0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue; } } 四.打字机效果...该效果主要是通过改变容器的宽度实现的。...通过上述的这几个属性就可以实现一个简易的打字机效果了~ 五.故障风格文字效果该动画效果比较复杂，主要用到了CSS伪元素、元素自定义属性、蒙版属性、animation动画等等。...其中clip-path属性是CSS3的新属性蒙版，其中的inset()值表示的是蒙版形状为矩形,定义蒙版的作用区域后通过@keyframes来设置逐帧动画，使蒙版的作用区域在垂直方向一直变化，实现上下抖动的效果

1.6K1 1

纯CSS实现的文字效果竟然可以这么酷炫！

前言 CSS是一门很特殊的语言，你认为CSS只能用来控制网页的结构与样式，但只要你有丰富的想象力，就能创造无限可能。...0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue; } } 四.打字机效果...该效果主要是通过改变容器的宽度实现的。...通过上述的这几个属性就可以实现一个简易的打字机效果了~ 五.故障风格文字效果该动画效果比较复杂，主要用到了CSS伪元素、元素自定义属性、蒙版属性、animation动画等等。...其中clip-path属性是CSS3的新属性蒙版，其中的inset()值表示的是蒙版形状为矩形,定义蒙版的作用区域后通过@keyframes来设置逐帧动画，使蒙版的作用区域在垂直方向一直变化，实现上下抖动的效果

1.4K2 0

动画里的打字机模式小技巧

直接上代码这个程序贼有趣像打字机把一个字一个字打出来不通过js也能完成动态效果，这也是css的好处哈 @keyframes w {...nowrap; 多余部分要省略overflow: hidden; 然后找一个好看的布局，本人是把它放在正中间如果在网页设计中可以根据网页进行定位我们为了美观，就要设置汉字大小，汉字个数乘以大小就等于宽度...，盒子高度要大于汉字高度，这是我们设计中必须要调试和计算的内容。

3701 0

使用css3如何实现一个文字打印效果

前言在很多网站首页介绍页里,为了吸引用户,暂留更长时间,使用了一些css3动画的示例效果文字打印.gif 实现这个动画原理想要实现这个动画,改变元素的宽度,结合动画css3关键帧实现具体代码如下所示...实现打字机效果 .example-css3dayin { text-align: center; font-weight: 700;...，100%是动画的完成，完成整个动画过程的规则就是动画序列；动画定义的是也可以用from和to来定义，的等同于0%到100% @keyframes中规定某项css样式，将当前的样式逐渐改为新的样式的过程...，称之为动画，我们可以改变任意的样式，改变任意的次数 CSS3动画常见属性 @keyframes :规定动画 animation: 所有动画属性的简写属性，除了 animation-play-state...animation-timing-function: steps(步数设置),让动画在规定的时间里几步完成 CSS3动画简写 animation: 动画名称持续时间运动曲线何时开始（延时）

2152 1

比例字体&等宽字体

等宽字体：早期的打字机、电脑屏幕由于技术的限制，不能自动显示比例字体，因而最先出现的是等宽字体。它指的是字符宽度相同的一类字体。...这里要注意的一点是，中英文宽度应该不是相同而是成整数倍关系——一般来说中文字符在这些字体中的宽度是英文字符的两倍。...不过，即便到今天，等宽字体也还有它一定的使用优势，比如命令行、打字机效果、又或者程序猿常常会拿它来显示代码。 ?...HTML标签 UI开发熟悉的html标签，它是用于表示计算机源代码或者其他机器可以阅读的文本内容。通常将标签内的文本变成等宽字体，表示这段文本是源程序代码。...CSS单位还有一个与等宽字体有关的css单位：ch ?

9K6 0

css 笔记

>被修饰的内容在HTML中如何使用css样式特点：仅作用于本标签...特点：作用于整个网站他们的优先级：当样式冲突时，就是采用就近原则，是值css属性离被修饰的内容最近的为主。 ...背景图像是随对象内容滚动 fixed:背景图像固定 css3的属性 *background-size...*overflow: 超出隐藏：hidden，visible：不剪切内容 overflow-x：内容超过其指定宽度时如何管理内容: visible | hidden | scroll...'是否大于或等于'width'。

2.3K4 0

前端面试CSS「建议收藏」

盒模型标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin...box-sizing属性： content-box：一个标准模式下的盒模型的计算方式 border-box：一个怪异模式下的盒模型的计算方式 div设置了box-sizing:border-box之后，width的宽度是内容...100px; position: absolute; left: 50%; margin: -150px; } 如何实现垂直居中 inline 元素可设置line-height的值等于...:480px)”> CSS : @media only screen and (max-device-width:480px) {/css样式/} css动画首先，使用@keyframes定义一个动画...，名称为testAnimation，如下代码，通过百分比来设置不同的 CSS 样式，规定动画的变化。

2672 0

HTML5响应式布局

电视机类型的设备； eech 语意和音频盒成器； aille 盲人用点字法触觉回馈设备； bossed 盲文打印机； ojection 各种投影设备； tty 使用固定密度字母栅格的媒介，比如电传打字机和终端...，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape； aspect-ratio 比例值，浏览器的纵横比； device-aspect-ratio 比例值，屏幕的纵横比。...:portrait)" href="portrait.css"> 横屏-屏幕宽度大于高度 <link rel="stylesheet" media="all and (orientation:landscape...这里主要是针对于图片的使用，为适配不同终端机型的屏幕<em>宽度</em>和像素密度，我们一般会使用如下方法设置图片的<em>CSS</em>样式： img{ max-width:100%;...height:auto; } 将图片的最大<em>宽度</em>设置为100%，以确保图像不会超出其父级元素的<em>宽度</em>，如果父级元素的<em>宽度</em>发生改变，图片的<em>宽度</em>也随之改变，height：auto 可以确保图片的<em>宽度</em>发生改变时

2.4K1 0

那些前端常用的网站插件

— 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js— 快速实现全屏滚动特性 Typed.js — 打字机效果...Animsition — CSS 实现动画过渡的 jQuery 插件 Barba.js — 流式页面过渡 TwentyTwenty — 一个对比图片的可视化 diff 工具 Vivus.js — 在... — 对智能设备方向变化做出响应的视差引擎 Typeahead.js — 搜索补全 Dragdealer.js — 炫酷拖拽 Bounce.js — 创建炫酷的 CSS3 动画 Pagepiling.js... — 拖拽插件 Flexdatalist — 自动补全 Slideout.js — 移动应用侧滑导航 Jquerymy — 使用 jQuery 实现双向数据绑定 Cleave.js — 实时格式化输入内容...动画实现 Ken burns 特效 DynCSS — 给 CSS 添加 function，动态化 CSS Magic animations — CSS3 实现动画特效 CSSpin — css spinners

4.4K5 0

IT课程 CSS基础 021_值类型、单位、大小、颜色

单位 CSS中的单位用于表示长度、角度、时间、频率等属性的值。长度单位：在CSS中，长度单位用于表示尺寸和距离，可以应用于各种属性，如宽度、高度、边距、填充等。...，1vw等于视口宽度的1%。...示例： .example { width: 50vw; /* 宽度为视口宽度的50% */ height: 30vh; /* 高度为视口高度的30% */ } 角度单位：在CSS中，角度单位用于表示旋转....example { transform: rotate(0.5turn); /* 旋转半圈，180度 */ } 时间单位：在CSS中，时间单位用于表示动画、过渡、动画延迟等属性中的时间值。...用于表示动画持续时间、过渡时间等。

871 0

HTML与CSS进阶

HTML与CSS进阶本文主要介绍H5新增内容以及CSS3中的新特性。在H5方面主要介绍拓展了哪些内容，CSS3方面介绍动画及转换。 H5新增内容「1....HTML5拓展了哪些内容」语义化标签本地存储兼容特性 2D、3D 动画、过渡 CSS3特性性能与集成「3....如果里面的参数是 % 移动的距离是盒子自身的宽度或者高度来对比的 */ /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */ /* transform: translateX...(animation) 「动画」是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。...，100 % 是动画的完成，这样的规则就是动画序列在 @keyframs中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数

2.9K5 0

卡牌特效: svg不规则倒计时动效

前端项目中，往往使用css来完成动画，像倒计时效果也可以使用css完成，但是相对来说css实现方案比较复杂，层次嵌套较多。倒计时动效要求覆盖图片的倒计时阴影为非规则且半透明的。...fill：填充内容 stroke-dasharray：虚线宽度 transform：变换下面用几行代码演示svg圆环图： <svg xmlns:xlink="http://www.w3....圆环<em>动画</em> svg的animate属性可以实现svg<em>动画</em>，它支持设置以下属性： attributeName：要变化的元素属性名称 attributeType：<em>CSS</em> | XML | auto begin，...repeatCount：<em>动画</em>执行次数 repeatDur：定义重复<em>动画</em>的总时间当stroke-dasharray的可见长度<em>等于</em>圆环的周长，此时可见长度刚好覆盖了整个圆环，基于以上的实现，再加上<em>动画</em>，就可以实现圆环<em>动画</em>了...实心环形<em>动画</em> 接下来就是要把圆环<em>动画</em>扩宽到实心环形<em>动画</em>。那么若增大storke-width，会发现圆<em>宽度</em>会向内外扩展 ?

2.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭