有没有办法用JavaScript/css实现三维文本效果?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (86)

我有我的网站的标题,想它看起来像一个3D绘制头,该怎么做?我尝试<div>使用相同的文本创建一个元素来放置它,但效果不同,但这不起作用。我怎么能这样做?我的代码如下

<h1>My Header Here</h1>

CSS

h1 {
    color: white;
    border-color: black;
}
提问于
用户回答回答于

可以使用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>

用户回答回答于

试试以下代码:

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>

扫码关注云+社区

领取腾讯云代金券