我们选择值以及背景的颜色。
- 文本仍然是文本。它可以是可搜索、可选择和可复制的。
使用 text-fill-color 属性。
其中我们需要使 text-fill-color 透明，以便背景图像可见。
放置 background-size 属性，它定义了背景图像的大小。
- 使用背景剪辑属性。
- 选择“text”值，这样背景就会被绘制在前景文本中。
- 背景剪辑：文本；仅适用于基于 Webkit 的浏览器（Google Chrome、Safari、Opera）。
- 为文本添加动画。
.box {
display: inline-block;
float: left;
height: 150px;
overflow: hidden;
width: 20%;
-webkit-transition: width 1.2s;
-moz-transition: width 1.2s;
transition: width 1.2s;
}
.box.books {
background-color: #1c87c9;
}
.box.quizzes {
background-color: #666666;
}
.box.snippets {
background-color: #e6ae2e;
}
.box.tools {
background-color: #8ebf42;
}
.box.functions {
background-color: #eb4034;
}
.box a {
color: #eeeeee;
text-decoration: none;
text-align: center;
vertical-align: middle;
height: 100%;
display: block;
padding-top: 20px;
}
.box span {
display: block;
position: relative;
top: 100%;
text-align: center;
-webkit-transition: top 1s;
-moz-transition: top 1s;
transition: top 1s;
}
.nav:hover .box {
width: 10%;
}
.nav .box:hover {
width: 60%;
}
.box:hover span {
top: 25%;
}
当然，这里我们需要 CSS @keyframes，它我们通过定义动画序列中关键帧（或者航点）的样式来指定动画期间特定时刻应该发生的事情。
如果你想让动画无休止地播放，你应该使用“infinite”值。我们可以使用不同的 CSS 动画属性值，让动画更具创意。
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossoroirn="anonymous">
<style>
.box {
display: inline-block;
float: left;
height: 150px;
overflow: hidden;
width: 20%;
-webkit-transition: width 1.2s;
-moz-transition: width 1.2s;
transition: width 1.2s;
}
.box.books {
background-color: #1c87c9;
}
.box.quizzes {
background-color: #666666;
}
.box.snippets {
background-color: #e6ae2e;
}
.box.tools {
background-color: #8ebf42;
}
.box.functions {
background-color: #eb4034;
}
.box a {
color: #eeeeee;
text-decoration: none;
text-align: center;
vertical-align: middle;
height: 100%;
display: block;
padding-top: 20px;
}
.box span {
display: block;
position: relative;
top: 100%;
text-align: center;
-webkit-transition: top 1s;
-moz-transition: top 1s;
transition: top 1s;
}
.nav:hover .box {
width: 10%;
}
.nav .box:hover {
width: 60%;
}
.box:hover span {
top: 25%;
}
</style>
</head>
<body>
<div class="nav">
<div class="box books">
<a href="#books">BOOKS
<span>
<i class="fas fa-book"></i>
</span>
</a>
</div>
<div class="box quizzes">
<a href="#quizzes">QUIZZES
<span>
<i class="fas fa-check"></i>
</span>
</a>
</div>
<div class="box snippets">
<a href="#snippets">SNIPPETS
<span>
<i class="fas fa-chalkboard-teacher"></i>
</span>
</a>
</div>
<div class="box tools">
<a href="#tools">TOOLS
<span>
<i class="fas fa-tools"></i>
</span>
</a>
</div>
<div class="box functions">
<a href="#functions">STRING FUNCTIONS
<span>
<i class="fas fa-file-alt"></i>
</span>
</a>
</div>
</div>
</body>
</html>
你有没有用动画阴影或者渐变创建文本？
如果没有，这个片段是给你的。
它将创建此类文本并使更具创意。
创建此类文本的最简单方法是使用 CSS background-clip 属性，该属性指定 background-color 和 background-image 应该离元素多远。
让我们一起尝试创建一个。
创建 HTML
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossoroirn="anonymous">
- 设置 <div> 标签并给它一个类名“animated-text”
- 添加 CSS
使用 background-image 属性为元素指定背景图像。
<div class="nav">
<div class="box books">
<a href="#books">BOOKS
<span>
<i class="fas fa-book"></i>
</span>
</a>
</div>
<div class="box quizzes">
<a href="#quizzes">QUIZZES
<span>
<i class="fas fa-check"></i>
</span>
</a>
</div>
<div class="box snippets">
<a href="#snippets">SNIPPETS
<span>
<i class="fas fa-chalkboard-teacher"></i>
</span>
</a>
</div>
<div class="box tools">
<a href="#tools">TOOLS
<span>
<i class="fas fa-tools"></i>
</span>
</a>
</div>
<div class="box functions">
<a href="#functions">STRING FUNCTIONS
<span>
<i class="fas fa-file-alt"></i>
</span>
</a>
</div>
</div>
日期：2020-06-02 22:15:03 来源：oir作者：oir