찾다
웹 프론트엔드HTML 튜토리얼如何创建(动态的)文本填充_html/css_WEB-ITnose

这是一篇关于如何使用不同的技术(包括CSS和SVG),为文本创建各种不同类型的(动态)填充和描边的教程。

查看DEMO 下载源码

我想,未来已经在这里。我们在CSS和SVG已经有这么多令人兴奋的可能性,这些我们以前都只能是想想而已。例如,我们现在有很多方法可以用来创建包含动态填充的文本。

大约在一年前, Sara Soueidan 写的一篇关于 创建纹理文本技术 的文章,在Codrops上发表了。这篇精彩的文章将告诉你所有关于创建不同纹理文本的方法,使用一些现代的Web技术,包括canvas。

我对于这个话题非常感兴趣,但是是从一个不同的角度来看。我有以下的几个问题:添加的文本填充可以是动态的吗?我们可以给文本添加动态的阴影或者渐变吗?或者使用视频来填充文本?

在这篇文章中,我将分享我的几个试验,以及五个创建图案填充文本的方法。这五种情况中的三种,我们将保留文本可选中的能力。当然我们是希望每一种情况都是文本可选中的,但是使用一些变通的方法,我们也是可以解决这个问题的。

对于每种技术,我都会给出其浏览器支持情况,选中文本的能力,以及添加动态填充的可能性(高度实验)。

在这里我不会把所有的代码都放进来,只放一些最重要的部分,但是你可以在下载的文件中找到所有的代码,然后自己进行试验。

好了,开始吧。

注意:有一些技术是实验性的,并不能在工作在所有的浏览器中。所以要看清楚每一节内容前面的浏览器支持情况。IE能支持的非常少。

使用 background-clip: text

浏览器支持:Chrome支持,Firefox不支持,IE不支持,Safari支持,Opera支持。

这是大家脑海中最直接能想到的方法,尽管 background-clip: text 目前只在基于webkit的浏览器中支持,只需要添加前缀 -webkit- 。

注意:这一节中的demo只能在Chrome、Opera和Safari中工作。

标签如下:

<div class="box-with-text">Text</div>

CSS如下:

.box-with-text {  background-image: url(IMAGE URL);  -webkit-text-fill-color: transparent;  -webkit-background-clip: text;}

文本保留文本的特性,所以我们可以选中并复制。缺点是缺少浏览器支持。在Firefox和IE中预览如下:

但是我们可以使用带 -webkit- 前缀的CSS渐变,来在非webkit的浏览器中删除背景(CSS3支持多背景图像,使用逗号分隔):

.box-with-text {  background-image: -webkit-linear-gradient(transparent, transparent),url(IMAGE URL);  -webkit-text-fill-color: transparent;  -webkit-background-clip: text;}

于是不支持的浏览器会直接忽略掉整个背景,这样我们可以避免背景图像被显示出来了,也不会很尴尬。

如果你在Firefox或IE中查看这个demo,结果应该是白字黑底的,如下。

使用渐变的这个简单的技巧可以帮助我们修复在非webkit的浏览器中,不显示图像,但是我相信在这样的工作范围中,这种方法对于纹理文本不是一个很好的选择。

如果我们想要让填充动起来,CSS背景很难做到。我们只能通过移动背景的位置和尺寸来添加动画,但是颜色不能平滑改变。

Demo 3 : 使用渐变,通过移动背景图像的位置添加动画

总结

  • 文本可选中
  • 动态填充。Yes, 但是有限制
  • **浏览器支持情况:只有webkit支持

这种使用 background-clip: text 的技术并不是跨浏览器的好方案,它对于动态填充只有有限的可能性。

SVG文本

浏览器支持:Chrome支持,Firefox支持,IE支持,Safari支持,Opera支持。

SVG是一种非常棒的格式,而且有广泛的浏览器支持。使用SVG,我们有三种方法来制作图案文本:

  • fill
  • mask
  • clip-path

这三种技术我们接下来都会讲到,先从 fill 开始

如果你不熟悉SVG,我建议你阅读 SVG规范 ,Sara Soueidan的 文章 ,或者WebPlatform.org上的 SVG教程 。

下面我们在SVG中创建 text :

<svg viewBox="0 0 600 300">  <text text-anchor="middle"          x="50%"          y="50%"          dy=".35em"          class="text"          >      Text    </text></svg>

这是一个非常普通的文本,我们可以选中并复制。来看看结果先:

SVG中的文本有和其它形状(圆形、矩形等等)相同的属性。它可以有填充和描边,以及其它很多的属性,例如可以是纯色,有渐变或图案。

一个简单渐变的标签:

<linearGradient id="gr-simple" x1="0" y1="0" x2="100%" y2="100%">    <stop stop-color="hsl(50, 100%, 70%)" offset="10%"/>    <stop stop-color="hsl(320, 100%, 50%)" offset="90%"/></linearGradient>

学习更多关于创建渐变的内容,可以阅读Joni Trythall的文章: Getting Started with SVG Gradients

元素的填充可以使用 fill 属性添加。当使用渐变或图案的时候,需要通过在 url() 中放置对应 id 来完成,如下:

<svg viewBox="0 0 600 300">  <text text-anchor="middle"          x="50%"          y="50%"          dy=".35em"          class="text"          fill="url(#gr-simple)">      Text    </text></svg>

另一种方法是在CSS中定义填充:

.text {  fill: url(#gr-simple);}

我们可以在CSS中设置渐变的颜色,但是我们需要使用SMIL来获取对于渐变的其它属性的控制:

<!-- Gradient --><radialGradient id="gr-radial"    cx="50%" cy="50%" r="70%">    <!-- Animation for radius of gradient -->    <animate attributeName="r"             values="0%;150%;100%;0%"             dur="5s" repeatCount="indefinite" />    <!-- Animation for colors of stop-color -->    <stop stop-color="#FFF" offset="0">      <animate attributeName="stop-color"             values="#333;#FFF;#FFF;#333"             dur="5s" repeatCount="indefinite" />    </stop>    <stop stop-color="rgba(55,55,55,0)" offset="100%"/></radialGradient>

更多关于使用SMIL的文章,可以阅读Sara Soueidan写的 A Guide to SVG Animations (SMIL) 一文。

现在我们来看看图案。SVG中的图案可以包含各种类型的SVG图形和图像。图案可以简单也可以非常复杂。SVG图案可以调整,而且不会失去锐度。

圆形图案的标签如下:

<pattern      id="p-spots"      viewBox="0 0 80 80"      patternUnits="userSpaceOnUse"      width="60" height="60"      x="5" y="5"      >   <g class="g-spots">      <circle r="5" cx="10" cy="10"/>      <circle r="7" cx="30" cy="30"/>      <circle r="5" cx="50" cy="10"/>      <circle r="9" cx="70" cy="30"/>      <circle r="11" cx="50" cy="50"/>      <circle r="5" cx="10" cy="50"/>      <circle r="7" cx="30" cy="70"/>      <circle r="9" cx="70" cy="70"/>    </g></pattern>

只定义了圆形的位置和大小,它们的颜色可以在CSS中定义,或者Sass,因为Sass可以使用迭代:

$colors: #1D4259, #0A7373, #30BF7C, #BAF266, #EEF272;$max: length($colors);.g-spots circle {  @for $item from 1 through $max {    &:nth-child(#{$max}n + #{$item}){      fill: nth($colors, $item);    }  }}

结果转换为如下的css:

.g-spots circle:nth-child(5n + 1) {  fill: #1D4259;}.g-spots circle:nth-child(5n + 2) {  fill: #0A7373;}.g-spots circle:nth-child(5n + 3) {  fill: #30BF7C;}.g-spots circle:nth-child(5n + 4) {  fill: #BAF266;}.g-spots circle:nth-child(5n + 5) {  fill: #EEF272;}

更多关于SVG图案的内容,可以查看MDN上的SVG教程中的 图案 这一节。

使用图案时,相对使用普通的SVG图形,在给元素添加动画方面有更少的选择。例如,图案中图形的变换,在Firefox中不能工作。但是我们可以让描边动起来,以获得类似缩放的效果。

下面的Demo我也是使用了Sass,但是在这里我不仅设置了颜色,还有 animation-delay 。这可以让星星依次动起来:

$colors: #551F7A, #BA2799, #D9587A, #FFDD00, #FFF3A1;$max: length($colors);$time: 2s;$time-step: $time/$max;.g-stars polygon {  stroke-width: 0;  animation: stroke $time infinite;  @for $item from 1 through $max {    &:nth-child(#{$max}n + #{$item}){      $color: nth($colors, $item);      fill: $color;      stroke: $color;      animation-delay: -($time-step*$item);    }  }}/* Change stroke-width within animation */@keyframes stroke {  50% {    stroke-width: 10;  }}

转换成CSS的结果:

.g-stars polygon {  stroke-width: 0;  animation: stroke 2s infinite;}.g-stars polygon:nth-child(5n + 1) {  fill: #551F7A;  stroke: #551F7A;  animation-delay: -0.4s;}.g-stars polygon:nth-child(5n + 2) {  fill: #BA2799;  stroke: #BA2799;  animation-delay: -0.8s;}.g-stars polygon:nth-child(5n + 3) {  fill: #D9587A;  stroke: #D9587A;  animation-delay: -1.2s;}.g-stars polygon:nth-child(5n + 4) {  fill: #FFDD00;  stroke: #FFDD00;  animation-delay: -1.6s;}.g-stars polygon:nth-child(5n + 5) {  fill: #FFF3A1;  stroke: #FFF3A1;  animation-delay: -2s;}/* Change stroke-width within animation */@keyframes stroke {  50% {    stroke-width: 10;  }}

如果你看了这个Demo的代码,你会发现图形比预期的多。当我们增大描边的时候,有一些图形可能会被图案的边边切断。通过使用重复的形状,就可以解决这个问题啦。

实际上我们也可以使用动态GIF来进行填充。但是通常gif图是比较大的,但它们确实可以用来创建非常棒的效果:

要创建一个图像填充,我们可以使用图案 pattern 元素来完成。包含图像的图案的标签如下:

<pattern      id="p-fire"      viewBox="30 100 186 200"      patternUnits="userSpaceOnUse"      width="216" height="200"      x="-70" y="35"      >  <image      xlink:href="http://yoksel.github.io/about-svg/assets/img/parts/fire.gif"      width="256" height="300"/></pattern>

和 background-clip: text 不同,这个文本在大多数现代浏览器中都是可以正确显示的。

现在来看看描边。对于HTML文本,我们可以使用 text-shadow 创建一个跨浏览器的描边,但是这种类型的描边有非常多的限制:

手工用CSS写这种类型的描边是非常繁琐而且无聊的,所以我在Sass中使用了一个小函数来完成。我们可以设置 color 和 width 为参数。尽管这个函数很方便,生成的代码也是相当多而且笨重的。

和在HTML中不同,SVG中所有元素都可以添加描边,包括文本。描边除了可以是纯色的,还可以是渐变和图案。

描边也可以是虚线,然后用另一种方式让它动起来:

对于这种类型的描边,我们需要复制很多份文本,用于应用多种颜色。完成这项繁琐工作的一个好方法是,使用 symbol :

<svg viewBox="0 0 600 300">  <!-- Symbol -->  <symbol id="s-text">    <text text-anchor="middle"            x="50%" y="50%" dy=".35em">        Text     </text>  </symbol>  <!-- Duplicate symbols -->  <use xlink:href="#s-text" class="text"            ></use>  <use xlink:href="#s-text" class="text"            ></use>  <use xlink:href="#s-text" class="text"            ></use>  <use xlink:href="#s-text" class="text"            ></use>  <use xlink:href="#s-text" class="text"            ></use></svg>

下面是我们控制颜色和动画的Sass代码:

$colors: #F2385A, #F5A503, #E9F1DF, #56D9CD, #3AA1BF;$max: length($colors);$dash: 70;$dash-gap: 10;$dash-space: $dash * ($max - 1) + $dash-gap * $max;$time: 6s;$time-step: $time/$max;.text {  fill: none;  stroke-width: 6;  stroke-linejoin: round;  stroke-dasharray: $dash $dash-space;  stroke-dashoffset: 0;  animation: stroke $time infinite linear;  @for $item from 1 through $max {    &:nth-child(#{$max}n + #{$item}){      $color: nth($colors, $item);      stroke: $color;      animation-delay: -($time-step * $item);    }  }}@keyframes stroke {  100% {    stroke-dashoffset: -($dash + $dash-gap) * $max;  }}

转换成CSS的结果:

.text {  fill: none;  stroke-width: 6;  stroke-linejoin: round;  stroke-dasharray: 70 330;  stroke-dashoffset: 0;  animation: stroke 6s infinite linear;}.text:nth-child(5n + 1) {  stroke: #F2385A;  animation-delay: -1.2s;}.text:nth-child(5n + 2) {  stroke: #F5A503;  animation-delay: -2.4s;}.text:nth-child(5n + 3) {  stroke: #E9F1DF;  animation-delay: -3.6s;}.text:nth-child(5n + 4) {  stroke: #56D9CD;  animation-delay: -4.8s;}.text:nth-child(5n + 5) {  stroke: #3AA1BF;  animation-delay: -6s;}@keyframes stroke {  100% {    stroke-dashoffset: -400;  }}

对于每一个 symbol ,我们都单独设置了一个动画延迟,所以描边的部分不会在一个地方积聚,而是沿着字母的轮廓传播。

总结

使用这种方法,文本可以使用CSS定义样式。我们也可以选中和复制文本。另一个很大的优点是SVG确实有非常棒的浏览器支持。所以要创建这些类型的填充,SVG是最好的候选之一。

使用SVG的一个缺点是处理文本的能力限制。例如,一般文本中的单词不会在文档边界的地方中断,我们可以使用一些技巧来获取换行符。但是在这里文本可能会在单词中间就中断,所以这种方法更适合于短文本和logo。

  • 文本可选中
  • 动态填充, 填充和描边都可以是动画,但有一些和SVG动画相关的限制。
  • 浏览器支持情况: 所有现代浏览器

SVG mask 和SVG clippath

浏览器支持:Chrome支持,Firefox支持,IE支持,Safari支持,Opera支持。

SVG中有两种类型的蒙版。CSS中也有可以应用于HTML元素的蒙版,但是 浏览器支持一般般 ,所以我们来看看SVG mask吧。

SVG mask也可以应用于HTML元素,但是目前该功能只适用于Firefox。应用于SVG元素的SVG mask则可以在所有现代浏览器中工作。而且 clippath 和 mask 都可以包含文本。

mask 和 clip-path 之间有什么区别呢?

  • clip-path 只是简单地按照路径边界去裁剪对象。简单来说就是剪纸。
  • mask 是有透明度和亮度的蒙版,可以对对象做过滤。

使用 clippath 的例子,标签如下:

<clippath id="cp-text">    <text text-anchor="middle"          x="50%" y="50%" dy=".35em"          class="text--line">      Text    </text></clippath>

这是应用了裁剪路径的图形组的标签:

<g clip-path="url(#cp-text)">    <circle r="70%"        cx="300"        cy="150"        class="c-fill--color"/>    <circle r="70%"        cx="300"        cy="150"        class="c-fill"/></g>

根据你要做的,这个图形可以替换为其它任何的图形。在这个demo中我使用了两个 circle 元素,第二个使用图案填充,第一个(在第二个后面)使用纯色填充。需要隐藏第二个图形里图案之间的细线。简单的情况下使用一个图形也已经够了。

mask 中可以包含 symbol 的内容。当我们需要复制多份文本时,这对于应用了丰富效果的文本来说非常方便。

<symbol id="s-text">  <text text-anchor="middle"        x="50%"        y="50%"        dy=".35em"        class="text"        >    Text  </text></symbol><!--Mask--><mask id="m-text"      maskunits="userSpaceOnUse"      maskcontentunits="userSpaceOnUse">   <use xlink:href="#s-text"      class="text-mask"    ></use></mask>

用于组合的标签是相同的,但是蒙版使用 mask 属性应用:

<g mask="url(#m-text)">  ...</g>

mask 和 clippath 中的文本都可以添加样式。例如,我们可以改变 font-family 和 font-size 。但是文本不可选中。

这个问题可以通过从 mask / clippath 中复制文本来解决,把它放在被添加蒙版的元素之上,然后设置 fill: transparent 去掉它的填充。这样我们得到一个透明的可以选中和复制的文本。

复制文本的最好方法是使用 symbol 。但是 symbol 在 clippath 中不支持,但是如果你使用的是 mask ,你可以使用一个 symbol 作为 mask ,然后一个作为透明文本。

symbol 的副本必须放在带 mask 或 clip-path 的元素之下。

尝试在下面的demo中选中和复制文本:

有一点很重要,因为 fill:none 不工作,但 fill: transparent 可以。还有,带有描边但是没有填充的图形可以完成相同的效果。文本也是可选中的。

这种技术的巨大优点是各种各样的添加动态填充的可能性。你可以使用任何SVG元素的组合,然后用很多不同的方法给它们添加动画。在这种情况下,可以使用变换,填充和描边来添加动画。

现在我们有一组带 clip-path 的添加了动画的内容,包含图案描边动画:

下面的这个Demo展示了一组使用 clip-path 裁剪的动画图形:

还有很多方法可以填充文本。在SVG中使用HTML是可能的,通过使用 foreignObject 元素,所以给HTML元素应用SVG mask / clippath 是可能的,还可以添加CSS效果和动画,甚至视频。虽然这种技术也有一些限制。例如,Chrome中播放视频会忽略蒙版。所以我们现在不能使用它,尽管它真的非常有趣。但是我们还有其它方法可选。

总结

  • 文本不可选中,但是我们可以使用一种变通的方法使其可选中
  • 动态填充, 包括描边和填充都可以
  • 浏览器支持情况: 所有现代浏览器

相比SVG文本,这种技术有更多添加动画的可能性。

混合blend模式

浏览器支持:Chrome实验模式下支持,Firefox支持,IE不支持,Safari支持,Opera实验模式下支持。

注意:要查看这一节中的demo,你需要使用Firefox或Safari,或者Chrome中激活了试验性web平台的flag→打开 chrome://flags/#enable-experimental-web-platform-features (需要重启Chrome)。要在Opera中查看demo,同样需要激活→ opera://flags/#enable-experimental-web-platform-features ,然后重启浏览器。

这种使用图案文本的方法是实验性的,并不能在所有浏览器中都工作,但是确实非常有趣,因为我们可以使用任何东西作为文本的填充。目前,浏览器支持并不是非常好。

如果你对于blend mode不熟悉,推荐这篇文章: Getting to Know CSS Blend Modes 。

有关于Blend Mode更多的教程,可以点击这里。

它的工作原理:不同的(混合模式)blend mode根据它们应用的图层的颜色而不同地工作。例如, lighten 模式只显示内容中亮的内容,而暗的内容会消失。另一个方面, darken 模式则会选择暗的内容,然后亮的内容会显示。这允许我们创建一个具有复杂形状的透明内容的HTML图层,即使常规形状的文本也可以改变。

下面是简化版本的标签:

<div class="box-with-text">    <div class="text">Text</div></div>

这是CSS:

.box-with-text {  background: url(IMAGE URL)    50% 70% / cover;  }  .text {    background: black;    color: white;    mix-blend-mode: darken;    }

所有的这些魔法效果都包含在 mix-blend-mode: darken 这一行中。通过这一行混合模式的定义,所有白色的内容都会变成完全透明,我们可以看到其父元素的背景。

这种技术的缺点是我们不可以裁剪文本周围的内哦让。这种方法不允许我们把图案文本放在另一层带有填充的文本之上(但是可以使用SVG蒙版完成)。事实上,这只是一个有孔的图层,通过它我们可以看到下一层的元素。但是在这个图层之下,我们可以放置任何我们能想象到的任何东西,例如,CSS动画效果,甚至视频。

有一个问题,出现在文本块周围的细线,特别是在Firefox中。这可以通过伪元素解决,给伪元素设置一个和背景想听颜色的边框。

.box-with-text {  background: url(IMAGE URL) 50% 70%/cover;  /* Hack to hide thin transparent lines while resizing objects */}.box-with-text:after {  content: '';  position: absolute;  top: -2px;  right: -2px;  bottom: -2px;  left: -2px;  display: block;  border: 4px solid black;}.text {  background: black;  color: white;  mix-blend-mode: darken;}

这种方法的最主要缺点是缺少浏览器支持,所以目前这种技术还是更适合用户实验,而不是在真正的网站项目中。

结论

  • 文本可选中
  • 动态填充, 可以作为任何html内容包括视频的填充
  • 浏览器支持情况:在Safari和Firefox混合模式是完全支持,在Chrome和Opera中都需要标志实验环境,并不完全支持。

SVG mask和HTML

浏览器支持情况:Chrome支持,Firefox支持,IE支持,Safari支持,Opera支持。

最后一种技术也是有一点点古怪的。它和前一个很相似,但是它有更好的浏览器支持,因为,它是SVG!

我把这种方法称为“反向遮罩”。它是使用SVG的 mask 来获取一个纯色填充的图层,以及一个文本形状的透明区域。然后,这个图层可以被放到任何的HTML元素上。

我们不会把包含内容的图层的额外部分裁剪(和我们前面使用 mask 和 clip-path 时一样)。相反,我们会把我们需要的图形挖空,放在纯色填充的图层上,和印刷类似。如下:

对于这种情况,SVG可以分为两个部分。第一个部分是不可见的,是一个包含文本和蒙版的 symbol 元素。

<svg viewBox="0 0 600 300" class="svg-defs">  <!-- Symbol with text -->  <symbol id="s-text">    <text text-anchor="middle"          x="50%" y="50%" dy=".35em"          class="text">      Text    </text>   </symbol>   <!-- Mask with text -->   <mask id="m-text"      maskunits="userSpaceOnUse"      maskcontentunits="userSpaceOnUse">     <rect           width="100%"           height="100%"           class="mask__shape"/>     <use xlink:href="#s-text"        class="mask__text"/>  </mask></svg>

在简单的情况下,你不需要添加symbol,但是它可以让你的代码更有可读性。在比较复杂的情况下,它会帮你做一些有趣的效果。

在这种情况下,我们需要反转蒙版,这也是为什么我们需要设置图形为白色,来填充蒙版:

.mask__shape {  fill: white;}

文本的颜色必须是黑色的,因为蒙版中的透明区域必须是文本的形状。

同时,我们还需要一个比较复杂的HTML结构:

<div class="box-with-text">  <!-- Content for text -->  <div class="text-fill"></div>  <!-- SVG to cover text fill -->  <svg viewBox="0 0 600 300"       class="svg-inverted-mask">    <!-- Big shape with hole in form of text -->    <rect         width="100%" height="100%"         mask="url(#m-text)"         class="shape--fill"/>    <!-- Transparent copy of text to keep patterned text selectable -->    <use xlink:href="#s-text"         class="text--transparent"/>  </svg></div>

最底层包含HTML元素,我们可以给它应用一个背景或者使用一些HTML内容进行填充。在简单的情况下,背景可以应用于父元素,但为了更多的灵活性,最好使用一个单独的元素。

下一层是包含填充和蒙版的SVG。这是一块文本形状透明区域的可见图层。在这个图层上面,我们放一个包含文本的 symbol ,以保持文本可访问性。

这种技术的缺点是,包含内容的图层不是被蒙版裁剪的。下面的图层可以通过上面图层的透明区域看到。我们不能把文本从背景上裁剪,然后把它放到其它图层上。

但是这种技术也是有一定优势的。第一个优点是HTML是放在SVG外边的,可以包含任何我们想要的东西:动画和媒体内容。

如果你想让文本的填充变成动画的话,是非常简单的。但是注意性能可能不太好:

你想要用视频来填充文本?没问题:

在这些Demo中,尺寸管理看起来可能有点复杂。如果你不想调整文本块的大小,你可能不需要那一块的代码了。

第二个优点是,和使用混合模式不同,带有蒙版的图层的填充,不会和下面的图层混合,所以它可以包含渐变和图案填充。

结论

  • 文本不可选中,但是我们可以让它可访问
  • 动态填充, 任何HTML内容包括视频都可以作为填充
  • 浏览器支持情况,所有现代浏览器

总结

现在你已经了解了一些创建文本图案填充,包括动画填充的技巧了。即使有一些技术我们目前还不能用,我相信我们将来总可以用得上的。现在,我想是时间让你自己来实践,创建一些impressive的文本效果了~

下载文件中包含所有这篇教程中介绍到的技术(动画和非动画文本填充)。如果你想看看这篇文章中的demo,可以 点击这里下载文件 。

注意,你需要调整下载文件中的一些实例的图案路径,如:在style 11中我们使用了一个纹理作为描边,是这样引用的: stroke: url(URL/index11.html#p-spots) 。但是你需要设置正确的URL。

查看DEMO 下载源码

本文根据 @yoksel 的《 How to Create (Animated) Text Fills 》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处: http://tympanus.net/codrops/2015/02/16/create-animated-text-fills/ 。

彦子

在校学生,本科计算机专业。逗比一枚,热爱前端热爱生活,喜欢CSS喜欢JavaScript喜欢SVG,爱玩PS玩AI玩啊逗比的软件。努力向上,厚积薄发。

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
HTML의 부울 속성은 무엇입니까? 몇 가지 예를 들어주십시오.HTML의 부울 속성은 무엇입니까? 몇 가지 예를 들어주십시오.Apr 25, 2025 am 12:01 AM

부울 속성은 값없이 활성화되는 HTML의 특수 속성입니다. 1. 부울 속성은 입력 상자를 비활성화하는 등의 존재 여부에 따라 요소의 동작을 제어합니다. 2. 작업 원칙은 브라우저가 구문 분석 할 때 속성의 존재에 따라 요소 동작을 변경하는 것입니다. 3. 기본 사용법은 속성을 직접 추가하는 것이며, 고급 사용량은 JavaScript를 통해 동적으로 제어 될 수 있습니다. 4. 일반적인 실수는 값을 설정해야한다고 잘못 생각하고 올바른 글쓰기 방법은 간결해야합니다. 5. 모범 사례는 코드를 간결하게 유지하고 부울 속성을 합리적으로 사용하여 웹 페이지 성능 및 사용자 경험을 최적화하는 것입니다.

HTML 코드를 어떻게 검증 할 수 있습니까?HTML 코드를 어떻게 검증 할 수 있습니까?Apr 24, 2025 am 12:04 AM

HTML 코드는 온라인 유효성 검사기, 통합 도구 및 자동화 된 프로세스를 통해 깨끗할 수 있습니다. 1) w3cmarkupvalidationservice를 사용하여 온라인으로 HTML 코드를 확인하십시오. 2) 실시간 확인을 위해 VisualStudioCode에 HTMLHINT 확장을 설치하고 구성하십시오. 3) htmltidy를 사용하여 시공 프로세스에서 HTML 파일을 자동으로 확인하고 청소하십시오.

HTML vs. CSS 및 JavaScript : 웹 기술 비교HTML vs. CSS 및 JavaScript : 웹 기술 비교Apr 23, 2025 am 12:05 AM

HTML, CSS 및 JavaScript는 최신 웹 페이지를 구축하기위한 핵심 기술입니다. 1. HTML 웹 페이지 구조를 정의합니다. 2. CSS는 웹 페이지의 모양을 담당합니다.

마크 업 언어로서의 HTML : 기능과 목적마크 업 언어로서의 HTML : 기능과 목적Apr 22, 2025 am 12:02 AM

HTML의 기능은 웹 페이지의 구조와 내용을 정의하는 것이며, 그 목적은 정보를 표시하는 표준화 된 방법을 제공하는 것입니다. 1) HTML은 타이틀 및 단락과 같은 태그 및 속성을 통해 웹 페이지의 다양한 부분을 구성합니다. 2) 콘텐츠 및 성능 분리를 지원하고 유지 보수 효율성을 향상시킵니다. 3) HTML은 확장 가능하므로 사용자 정의 태그가 SEO를 향상시킬 수 있습니다.

HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향Apr 19, 2025 am 12:02 AM

HTML의 미래 트렌드는 의미론 및 웹 구성 요소이며 CSS의 미래 트렌드는 CSS-In-JS 및 CSShoudini이며, JavaScript의 미래 트렌드는 WebAssembly 및 서버리스입니다. 1. HTML 시맨틱은 접근성과 SEO 효과를 향상시키고 웹 구성 요소는 개발 효율성을 향상 시키지만 브라우저 호환성에주의를 기울여야합니다. 2. CSS-in-JS는 스타일 관리 유연성을 향상 시키지만 파일 크기를 증가시킬 수 있습니다. CSShoudini는 CSS 렌더링의 직접 작동을 허용합니다. 3. Webosembly는 브라우저 애플리케이션 성능을 최적화하지만 가파른 학습 곡선을 가지고 있으며 서버리스는 개발을 단순화하지만 콜드 스타트 ​​문제의 최적화가 필요합니다.

HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작Apr 18, 2025 am 12:09 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.

HTML의 미래 : 웹 디자인의 진화 및 트렌드HTML의 미래 : 웹 디자인의 진화 및 트렌드Apr 17, 2025 am 12:12 AM

HTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.

HTML vs. CSS vs. JavaScript : 비교 개요HTML vs. CSS vs. JavaScript : 비교 개요Apr 16, 2025 am 12:04 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. HTML은 컨텐츠 구조를 담당하고 CSS는 스타일을 담당하며 JavaScript는 동적 동작을 담당합니다. 1. HTML은 태그를 통해 웹 페이지 구조와 컨텐츠를 정의하여 의미를 보장합니다. 2. CSS는 선택기와 속성을 통해 웹 페이지 스타일을 제어하여 아름답고 읽기 쉽게 만듭니다. 3. JavaScript는 스크립트를 통해 웹 페이지 동작을 제어하여 동적 및 대화식 기능을 달성합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구