有没有一种用JavaScript/CSS制作3D文本效果的方法
有没有一种用JavaScript/CSS制作3D文本效果的方法
提问于 2018-08-27 07:23:24
我在我的网站上有一个标题，我希望它看起来像一个3D绘制的标题-如下图所示：
我该怎么做呢？我尝试创建一个<div>元素，用相同的文本放在它后面，但效果不同，但不起作用。我怎样才能做到这一点呢？到目前为止，我的代码如下。
<h1>My Header Here</h1>CSS
h1 {
color: white;
border-color: black;
}解决方案不必是纯CSS，它可以是JS，但不需要外部库(除了jQuery)。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-27 07:32:20
你可以使用很多这样的text-shadow：
body{ font-family: sans-serif; font-size: 2em; }
.coolShadow {
color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
text-shadow:
-1px 1px 0 #000,
-2px 2px 0 #000,
-3px 3px 0 #000,
-4px 4px 0 #000,
-5px 5px 0 #000,
-6px 6px 0 #000,
-7px 7px 0 #000;
}<h1 class="coolShadow">My Header Here</h1>
<h2>No shadows for me :(</h2>
<h3 class="coolShadow">I'M COOL! :)<h3>
Stack Overflow用户
发布于 2018-08-27 07:32:01
1)使用text-shadow
h1 {
text-shadow: 2px 2px black;
}2)愚蠢，可能弊大于利，但可能比解决方案#1更有效。渲染多个元素，一个接一个，并使用position: absolute定位它们。
<div class="h1_block">
<h1 class="h1">StackOverflow</h1>
<span class="h1 h1_shadow" style="top: 0; left: 0;">StackOverflow</span>
<span class="h1 h1_shadow" style="top: -1; left: -1;">StackOverflow</span>
<span class="h1 h1_shadow" style="top: -2; left: -2;">StackOverflow</span>
<span class="h1 h1_shadow" style="top: -3; left: -3;">StackOverflow</span>
</div>可能是类似的东西。
3)使用画布。或者是一张图片。您可以在画布上动态呈现文本，并应用选定的效果。
https://www.html5rocks.com/en/tutorials/canvas/texteffects/
这可能会有所帮助。
Stack Overflow用户
发布于 2018-08-27 07:38:36
这应该可以让你开始学习了。首先，在https://fonts.google.com/上找到一种你认为可以使用的谷歌字体(如果你不喜欢我选择的字体)。有成百上千个。然后尝试使用阴影值和阴影颜色。(我一直使用这个工具来处理颜色：https://www.w3schools.com/colors/colors_picker.asp。)
编辑:只是为了好玩，我抓取了一些其他字体，并借鉴了Roko使用多个text-shadow值的技术(这改进了我的答案)。然后我尝试在阴影中创建一个渐变，那里的灰色逐渐变亮。
div {
text-shadow:
-1px 1px 0 #aaa,
-2px 2px 0 #a8a8a8,
-3px 3px 0 #bbb,
-4px 4px 0 #b8b8b8,
-5px 5px 0 #ccc,
-6px 6px 0 #c8c8c8,
-7px 7px 0 #ddd;
}
#indie {
font-family: 'Indie Flower', cursive;
font-size: 112px;
font-weight: bold;
}
#jua {
font-family: 'Jua', sans-serif;
font-size: 80px;
font-weight: bold;
}
#neucha {
font-family: 'Neucha', cursive;
font-size: 80px;
font-weight: bold;
}
#perm {
font-family: 'Permanent Marker', cursive;
font-size: 80px;
font-weight: bold;
}<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Jua|Neucha|Permanent+Marker" rel="stylesheet">
<div id="indie">LOVE</div>
<div id="jua">LOVE</div>
<div id="neucha">LOVE</div>
<div id="perm">LOVE</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52030966
复制相关文章
相似问题