CSS曲线型文本的介绍
下面的文章提供了一个关于CSS曲线文本的概要。有组织的表现是造型的根源。CSS的理念是让页面/网站看起来和要求的完全一样。有一些直接的方法可以实现一些定制的功能。然后，还有一些间接方法来实现特定的输出。弧形文字恰好属于后一种类型。我们所说的曲线文本，指的是沿着一条路径的文本，它不是直线。它可以是之字形或圆形，或任何喜欢的形状。这使页面的标题更加突出。它也可以用于其他目的。
方法和例子
如上所述，CSS中没有提供直接的属性来实现弯曲的文本。但是，我们可以利用变换属性来创建弯曲的文本。这包括将文字放在不同的角度上，这些角度是相互协调的，这样文字就会落在一个确定的轨迹上。我们将定义一些类，并在HTML页面上相应地调用它们，这样，每个字母都被放置在一定的角度上，文本看起来就会是弯曲的。
例子#1 - 使用外部CSS的曲线文本
a.由于我们在这个例子中使用的是外部CSS，我们将首先创建CSS页面。
b.正如在方法论中看到的，我们将为这个例子创建一些类。我们的想法是，一个词的所有字母都必须放在不同的角度，为此我们将创建一个不同的类，并采用不同的变换程度。
c.让我们把HELLO WORLD这个词拆开。它被分解成10个字母。因此，如果我们按照我们的方法，在这个例子中会有10个类的定义，每个类分别代表一个字母。
d.现在，每个字母的类可以被编码为如下。
.c1 {
transform: rotate(6deg);
color: violet;
}
.c2 {
transform: rotate(12deg);
color: indigo;
}
.c3 {
transform: rotate(18deg);
color: blue;
}
.c4 {
transform: rotate(24deg);
color: green;
}
.c5 {
transform: rotate(30deg);
color: yellow;
}
.c6 {
transform: rotate(36deg);
color: orange;
}
.c7 {
transform: rotate(43deg);
color: red;
}
.c8 {
transform: rotate(48deg);
color: purple;
}
.c9 {
transform: rotate(54deg);
color: goldenrod;
}
.c10 {
transform: rotate(60deg);
color: teal;
}
e.除了这些类之外，让我们也以下列方式为标题元素设置样式
h1 span {
font-size: 26px ;
transform-origin: bottom;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
height: 300px;
width: 50px;
left: 50;
top: 50;
position: absolute;
}
f.因此，最终的CSS代码应该是这样的。
h1 span {
font-size: 26px ;
transform-origin: bottom;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
height: 300px;
width: 50px;
left: 50;
top: 50;
position: absolute;
}
.c1 {
transform: rotate(6deg);
color: violet;
}
.c2 {
transform: rotate(12deg);
color: indigo;
}
.c3 {
transform: rotate(18deg);
color: blue;
}
.c4 {
transform: rotate(24deg);
color: green;
}
.c5 {
transform: rotate(30deg);
color: yellow;
}
.c6 {
transform: rotate(36deg);
color: orange;
}
.c7 {
transform: rotate(43deg);
color: red;
}
.c8 {
transform: rotate(48deg);
color: purple;
}
.c9 {
transform: rotate(54deg);
color: goldenrod;
}
.c10 {
transform: rotate(60deg);
color: teal;
}
g.现在，CSS代码已经完成，我们将转入本例的HTML部分。
h.现在，按照这个方法，每个字母将被写在一个不同的中，其中将调用一个不同的类。这将确保每个字母的放置角度与其他字母不同。
i.我们将首先在标题部分调用外部CSS文件。
<head>
<title>Hi There</title>
<link rel = "stylesheet" href = "curvedText.css">
</head>
j.进入正文部分，我们将在标题标签中调用总共10个跨度，每个跨度呈现出HELLO WORLD这个词的不同字母。
<h1>
<span class="c1">H</span>
<span class="c2">E</span>
<span class="c3">L</span>
<span class="c4">L</span>
<span class="c5">0</span>
<span class="c6">W</span>
<span class="c7">0</span>
<span class="c8">R</span>
<span class="c9">L</span>
<span class="c10">D</span>
</h1>
k.结合正文和页眉部分，最终的HTML页面应该是这样的
<html>
<head>
<title> Demo of Curved text using CSS and HTML </title>
<link rel = "stylesheet" href = "curvedText.css">
</head>
<body>
<h2>Demo of Curved text using CSS and HTML</h2>
<h1>
<span class="c1">H</span>
<span class="c2">E</span>
<span class="c3">L</span>
<span class="c4">L</span>
<span class="c5">0</span>
<span class="c6">W</span>
<span class="c7">0</span>
<span class="c8">R</span>
<span class="c9">L</span>
<span class="c10">D</span>
</h1>
</body>
</html>
l.我们将保存这个HTML页面并通过浏览器打开它。
最后的结果会是这样的:
m.正如我们在截图中看到的那样，因为每个字母都是以相等的角度放置的，所以它形成了一个圆形路径。角度可以通过实验来实现任何类型的路径要求。
例子#2 - 使用内部CSS的曲线文本
a.在这个例子中，我们将采用同样的逻辑，但不是使用外部的CSS文件，而是在HTML页面的head部分的style标签中声明造型。
b.主体部分将与之前的例子保持一致，每个跨页将调用不同的类，使短语的每个字母都以相同的角度放置。
c.最后的HTML代码应该是这样的。
<html>
<head>
<title>Demo Of curved text using CSS and HTML</title>
<style>
h1 span {
font-size: 26px ;
transform-origin: bottom;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
height: 300px;
width: 50px;
left: 50;
top: 50;
position: absolute;
}
.c1 {
transform: rotate(6deg);
color: violet;
}
.c2 {
transform: rotate(12deg);
color: indigo;
}
.c3 {
transform: rotate(18deg);
color: blue;
}
.c4 {
transform: rotate(24deg);
color: green;
}
.c5 {
transform: rotate(30deg);
color: yellow;
}
.c6 {
transform: rotate(36deg);
color: orange;
}
.c7 {
transform: rotate(43deg);
color: red;
}
.c8 {
transform: rotate(48deg);
color: purple;
}
.c9 {
transform: rotate(54deg);
color: goldenrod;
}
.c10 {
transform: rotate(60deg);
color: teal;
}
</style>
</head>
<body>
<h2>Demo of Curved text using CSS and HTML</h2>
<h1>
<span class="c1">H</span>
<span class="c2">E</span>
<span class="c3">L</span>
<span class="c4">L</span>
<span class="c5">0</span>
<span class="c6">W</span>
<span class="c7">0</span>
<span class="c8">R</span>
<span class="c9">L</span>
<span class="c10">D</span>
</h1>
</body>
</html>
d.输出结果将是这样的:
在上面的两个例子中，我们遵循一种方法来获得一个弯曲的文本。请注意，还有许多其他方法可以做到这一点。有些可能也涉及到JavaScript和其他组件。
