用HTML和CSS实现酷炫的文字特效

言

马上我们就要进入下一个阶段，也就是HTML和CSS实现前端界面的阶段了，想必很多小伙伴都想给自己的页面加点酷炫的特效，今天，我就给大家整理了一些非常酷炫的文字特效来装点你的页面！有些是从网络上找的，有些是自己写出来的

字体实例

下面就是一些字体实例了

镂空字体

.loukong{ 
    /* 设置文字为透明，设置文本描边*/ 
    background-color: #00c4ff;
    -webkit-text-fill-color: transparent; 
    -webkit-text-stroke:1px #000; 
}

立体字体

.liti{
    /* 文字左上设置多层浅色阴影，右下设置多层暗色阴影，文字色同背景色 */
    background-color: #d2d500;
    color: #d2d500;
    text-shadow: -1px -1px 0px #e6e600,-2px -2px 0px #e6e600,
    -3px -3px 0px #e6e600,1px 1px 0px #bfbf00,2px 2px 0px #bfbf00,3px 3px 0px #bfbf00;
 }

霓虹字体

.nihong{
    /* 深色底色，浅色文字，多层浅色文字阴影，弥散大 */
    background-color: darkgray;
    color: white;
    text-shadow: 0px 0px 15px #00FFFF,0px 0px 15px #00FFFF,0px 0px 15px #00FFFF;
 }

背景重叠

英文或者笔画稀疏的文本比较适合，笔画多看起来会不太好

.chongdie{
    /* 两层背景，一层与被背景色相同，一层与文字色相同 */
    background-color: gray;
    color: #eee;
    text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
 }

幻色字体

.huanse{
    /* 两层背景，没啥技巧 */
    background-color: darkgray;
    color: white;
    text-shadow: 1px 1px 0px #0000FF,2px 2px 0px #0000FF,-1px -1px 0px #E31B4E,-2px -2px 0px #E31B4E;
 }

仿生字体

.fangsheng{
    /* 要把阴影与大小配合好，一般来说大小都是偏大时采用 */
    font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
    text-transform: uppercase;/* 全开大写 */
    font-size: 92px;
    color: #f1ebe5;
    text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
    font-weight: bold;
    letter-spacing: -4px;
    background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);
 }

渐变文字

因为需要用到背景裁切（-webkit-background-clip），所以需要再嵌套一个背景div

.jianbian{
    background-color: #009195;
  }
.jianbian-inner{
    background: linear-gradient(90deg,#f88,#88f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* -webkit-text-stroke: 1px #000000; */
 }

后记

以上就是全部内容了，灵活运用css的属性，就能创造出很多你想得到的和想都想不到的特效，甚至一些连写脚本都很难实现的特效，所以，努力探索css吧，冲冲冲！

转自简书：乔一丁_2020强化班
原文链接：https://www.jianshu.com/p/b7fd3cf53924

本内链接

最后这些关于html的内容有点查漏补缺的意思了，这一次是关于文本内链接的使用方法，简单来说就是我们的页面中有一个章节名称目录，如何点击目录中的名称，就能正好在页面中显示相应内容。

如图所示：

点击目录的"总体评价"跳转到相应内容，如图：

就是这样的一个效果。在很多网页中经常看到。

这个案例我们会分三部分来讲解。

今天主要学习如何使用<a>标签进行页面内链接，已及从其他网页链接该页面内的指定内容。

这里会有一个问题，就是点击链接后，文字内容会置顶显示，这个默认形式会给我们带来不便，解决方案较复杂，会在最后一次讲解中给出。

下一次我们来学习如何对图片添加映射超链接，映射超链接的意思是，假如我的图片中有两个人物或物象，考虑读者会感兴趣，想了解更多内容，如何框选出物象边缘来添加链接，这就是图像映射超链接。如图：使用一个平时不可见的边框来制作图片映射链接，确保感兴趣的读者能点击到画面中的目标物体。

最后一部分我们将回答今天结尾的问题，也就是如何解决置顶问题。这一部分也会作为HTML部分结束的综合练习，和css部分启蒙的预热练习。，

首先看一下今天的基础代码

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>文内链接</title>
  </head> 
  <body >
  <a>试飞进程</a>
  <a>研制情况</a>
  <a>服役动态</a>
  <a>总体评价</a>
  <p>
  <h2><a>试飞进程</a></h2>
  歼-20隐形战斗机首架技术验证机于2011年1月11日中午12时50分左右进行首次升空飞行测试，13时08分成功着陆，历时18分钟。<br>整个首飞过程在歼-10S战斗教练机陪伴下完成 。2016年10月28日，首次发布"空军试飞员将驾歼-20飞机亮相中国航展"后，还陆续发布了"歼-20战机列装空军作战部队""空军歼-20战机首次开展海上方向实战化训练"等。
  <h2><a>研制情况</a></h2>
  在2016年11月1日，第十一届珠海航展，歼-20首次进行空中飞行展示。两架歼-20做了公开飞行，不仅在现场引起轰动，也立刻被西方媒体大量报道。歼-20是中国现代空中力量的代表作，也进入了世界最先进的第五代战斗机行列，它是中国国防能力高速发展的一个象征。<br>2018年11月11日，第十二届中国航展在珠海迎来"高光时刻"：歼-20战机在公开飞行展示中挂弹开仓，震撼献礼人民空军成立69周年纪念日。 <br>2019年10月13日，庆祝人民空军成立70周年航空开放活动新闻发布上，空军新闻发言人申进科大校介绍歼-20战机列阵人民空军"王牌部队"
  <h2><a>服役动态</a></h2>
  2017年3月9日，中央电视台报道歼-20战斗机正式进入空军序列。<br>2017年3月13日，《中国日报》发布消息称，中国自主研制的歼-20近期将装配国产发动机。<br>2017年7月30日，歼-20三机编队参加在朱日和举行的庆祝中国人民解放军成立90周年阅兵。歼击机梯队飞来，3架歼-20隐形战斗机以楔形编队的形式在天空中飞过。<br>2017年9月28日，在中国国防部行记者会上，国防部新闻发言人吴谦大校介绍歼-20飞机已经列装部队。<br>2017年11月10日上午，中国空军发言人申进科大校表示，歼-20 列装部队后，已经开展编队训练。<br>2018年2月9日，中国空军新闻发言人申进科大校发布消息，歼-20开始列装空军作战部队。<br>2018年10月30日，中国空军4架歼-20隐形战斗机现身珠海金湾机场上空。<br>2019年10月1日，歼-20现身庆祝中华人民共和国成立70周年阅兵式；阅兵中，歼-20与歼-16、歼-10C三型飞机分别以5机楔队组成战斗队形接受检阅；该三款歼击机被誉为中国空军歼击机家族的"三剑客"，是未来联合作战的骨干力量
  <h2><a>总体评价</a></h2>
  歼-20是眼下亚洲区域最先进的战机，这让中国空军在面对日本、韩国与印度等国家的空军时占有显著优势。外媒将歼-20与其他国家战机进行了对比。俄罗斯苏霍伊苏-57战斗机由于研制进度几度推迟，尚未正式交付入役；美国F-35战斗机也多次出现飞机供氧不足的问题，大面积停飞，出口受阻；韩国KF-X隐形战机先是被爆出因掌握不了关键技术而被迫降成四代半战机的情况，后又传出了合作方印尼打算撤资并已告知韩国的消息。因此，中国歼-20战机成为亚太区域领跑的优势战机。<br>中国空军正向全疆域作战的现代化战略性军种迈进，成为有效塑造态势、管控危机、遏制战争、打赢战争的重要力量。歼-20战机列装空军作战部队，将进一步提升空军综合作战能力，有助于空军更好的肩负起维护国家主权、安全和领土完整的神圣使命。<br>歼20是我国自主研制的第五代战斗机，它的研制实现了既定的四大目标——打造跨代新机、引领技术发展、创新研发体系、建设卓越团队。打造跨代新机，是按照性能、技术和进度要求，研制开发我国自己的新一代隐身战斗机。引领技术发展，指通过自主创新实现强军兴军的目标。歼20在态势感知、信息对抗、协同作战等多方面取得了突破，这是中国航空工业从跟跑到并跑，再到领跑的必由之路。创新研发体系，是指建设最先进的飞机研制条件和研制流程。通过一大批大国重器的研制，我们建立了具有我国特色的数字化研发体系。建设卓越团队，是指通过型号研制，锤炼一支爱党爱国的研制队伍，这些拥有报国情怀、创新精神的优秀青年是航空事业未来发展的生力军。未来，我们将在战斗机的机械化、信息化、智能化发展征程上不断前行。
  </p>
  </body> 
  </html>

看着复杂，实际上主要都是些内容文字，简化后的代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>文内链接</title>
  </head> 
  <body >
  <a>试飞进程</a>
  <a>研制情况</a>
  <a>服役动态</a>
  <a>总体评价</a>
  <p>
  <h2><a>试飞进程</a></h2>
    歼-20隐形........首次开展海上方向实战化训练"等。
  <h2><a>研制情况</a></h2>
    在2016年......"王牌部队"
  <h2><a>服役动态</a></h2>
    2骨干力量
  <h2><a>总体评价</a></h2>
    歼-20是眼下亚洲区域最先进的战机......不断前行。
  </p>
  </body> 
  </html>

就是在<body></body>中添加四个<a></a>标签来写入标题，并列写入一个<p></p>标签，并在<p></p>标签中添加文字内容和<h2></h2>标签。这时需要注意的是，<h2></h2>中还要用<a></a>标签夹住标题。

页面效果如下：

下面我们来添加文章内部链接

添加文章内部链接需要一前一后两个<a></a>标签。一个是目录中的<a></a>,如图：

一个是正文中的标题上的<a></a>,如图：

添加内部链接的办法非常简单，首先我们把目录中的标题<a></a>标签称为"召唤者"。把正文中的标题中的<a></a>标签称为"被召唤者"。如果您学过《》这篇教程就会知道，一个标签召唤或调用另一个标签需要能叫出被调用标签的名字！

所以先要给"被召唤者"起名字，起名字的方法有两种，一种是name=""，还有一种是id=""，建议大家都写上，因为有的浏览器不支持name属性。具体写法如下：

<h2><a name="chapter1" id="chapter1">试飞进程</a></h2>

在"召唤者"<a>标签中使用href属性来叫出"被召唤者"的名字！示例代码如下：需要在引号中添加#后再写名字。

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>文内链接</title>
  </head> 
  <body >
  <a href="#chapter1">试飞进程</a><!--看这里-->
  <a>研制情况</a>
  <a>服役动态</a>
  <a>总体评价</a>
  </body> 
  </html>

<a>标签有点懒，只叫名字的话它会假装听不见，所以还要具体描述它的特征，让它不好意思偷懒，也就是前后两个<a></a>标签中间夹的文字内容要一致，比如上文中的两个<a>中间的内容都是"试飞进程"。如果字不一样，休想叫得动"被召唤者"。

效果如下：

点击后，试飞进程标签跳到了视窗的最顶端，如图：这种顶在视窗顶端的显示的方式我们称之为"置顶"。

下面我们使用这个方法，为剩下的标题添加页面内链接。

打开外部页面中指定信息位置的方法

首先，我们复制一下这个页面文件命名为"打开外部页面文件指定位置.html"，然后删掉<p></p>和其中内容。示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>打开外部页面文件指定位置</title>
  </head> 
  <body >
  <a href="#chapter1">试飞进程</a>
  <a href="#chapter2">研制情况</a>
  <a href="#chapter3">服役动态</a>
  <a href="#chapter4">总体评价</a>
  </body> 
  </html>

方法非常简单，在href中添加外部页面路径即可！示例代码如下：

<a href="文内链接ceshi.html#chapter1">试飞进程</a>

依次添加后，页面效果如下：

点击其中一个标题"研制情况"，页面跳转，如图：

这里，置顶的问题就出现了，如果我们的文章目录一直在视图的顶部，每次点击页面内链接时，顶部的目录就会和标题重叠，非常不美观，解决这个问题就要涉及到<div>布局的应用，我们以后再说。

OK！今天我们的内容结束了，下一次学习图片映射链接功能。

喜欢的朋友请关注我，点赞也会让我动力满满。

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

产品设计时细节是产品经理最头疼的问题，一个button，一个链接都要考虑太多的细节问题。作者整理了常见的一些功能设计问题，一篇文章看懂这些功能设计。来学习吧。

定义

链接也称为超链接，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

样式

链接可以是一个字或是一段字这样的文本，也可以是一个按钮，一张图片，当你点击后跳转到另一个目标，当你把鼠标指针移到某个链接时会变成一个小手，当然在手机上没有这一特点。

1. 文本样式的链接

文本样式的链接一般在搜索引擎的网站呈现蓝色字样，大多会在下面加上下划线以便识别，不过现如今考虑到不影响文本的可读性与用户体验，逐渐取消了下划线。而在一些别的网站考虑到界面设计风格各方面的因素而不用蓝色。

谷歌的文本链接是蓝色，没有下划线

百度的文本链接也是蓝色，关键词是红色，有下划线

而京东的文本链接有灰色，有白色，有黑色

2. 按钮样式的链接

按钮样式的链接比文本样式的更容易识别，每一个按钮都是一样链接。

按钮样式链接

3. 图片样式的链接

图片样式的链接可以是单独的一张图片，也可以是文字与按钮一起组成一张图片，只是鼠标指针扫过图片的任何一个部位都会变成小手。

如桌面弹出这种游戏小窗口的图片式链接

由文字/图/按钮样式一起构成的一张图片式按钮，鼠标可以点击图中任何一部位

打开方式

链接打开的方式有三种：第一种是在当前页面刷新跳转，国外的网站大多是这样的打开式；第二种是在新标签页面打开链接，国内大多采用这种；第三种是提示用APP打开。当然现在出现了一种新的打开方式，那就是二维码扫描。

提示用美拍APP打开

类型

按照连接路径的不同，网页中超链接一般分为以下3种类型：内部链接，锚点链接和外部链接。

链接还可以分为动态链接和静态链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态链接，顾名思义，就是没有动态效果的链接。

1. 内部链接

与外部链接（即反向链接）相反，内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接，乃至站内关键词之间的Tag链接都可以归类为内部链接，因此内部链接我们也可以称之为站内链接，对内部链接的优化其实就是对网站的站内链接的优化。

2. 锚点链接

HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。

3. 外部链接

外部链接，又常被称为：“反向链接”或“导入链接”，是指通过其他网站链接到你的网站的链接。

外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高，访问量大，同时相对的外部链接较少，有助于快速提升你的网站知名度和排名的其他网站的友情链接。

如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。

链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。

链接状态

链接在交互上一般会呈现4种状态，即默认状态/悬停时状态/点击时状态/点击后状态。比如谷哥网站的交互体验。如下图：

点击前

悬停时，下面浮现半透明线条

点击时，有波纹晕开的动态效果

点击后，下面线条粗

有时候是3种状态，比如百度网和知乎应用：

默认状态

点击时链接变红

点击后链接变成紫色

IOS系统知乎应用的3种状态，而在Android系统没有用力点击这一状态。

默认状态

点击状态

用力点击会弹出预览小窗口

有些时候只有2种状态，如下图谷歌网：

默认和点击后状态一样

鼠标悬停时出现下划线

默认状态

点击时

而有时候比如在APP里有时候就一直只有一种状态，也可以称静态链接，之前的可以称之为动态链接。在不同的使用场景会因为当时的情况选择最合适的交互体验设计。有的情况下还会加上点击的音效，使用户体验更畅快，这在移动端用的使用情况多一些。

总之链接是网页不可缺少的构成部分，每一个链接的呈现都是经过深思熟虑的。

作者：潘瑶琼（简书作者）

本文由 @潘瑶琼授权发布于人人都是产品经理，未经作者许可，禁止转载。

在线咨询

上一篇：前端经典面试题(60道前端面试题包含JS、CSS、React、浏览器等)
下一篇：程序员浪漫起来没文科生什么事：HTML制作表白爱心-无需编程基础

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

用HTML和CSS实现酷炫的文字特效

言

相关属性介绍

-webkit-text-fill-color

-webkit-text-stroke

text-shadow

-webkit-background-clip

字体实例

镂空字体

立体字体

霓虹字体

背景重叠

幻色字体

仿生字体

渐变文字

后记

本内链接

HTML完整学习目录

定义

样式

1. 文本样式的链接

2. 按钮样式的链接

3. 图片样式的链接

打开方式

类型

1. 内部链接

2. 锚点链接

3. 外部链接

链接状态

您的项目需求