亚洲国内精品久久久,欧美日韩无大香

技術(shù)頻道 - html技術(shù)

CSS3實現(xiàn)的4種3D文字效果，代碼簡單，效果震撼

作者:admin 時間:2021-7-25 16:58:2 瀏覽:

前面文章介紹了CSS3實現(xiàn)的9種文本陰影效果，本文將介紹CSS3實現(xiàn)的4種3D文字效果。代碼很簡單，效果很震撼。

CSS3實現(xiàn)的4種3D文字效果

完整HTML代碼


<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <title>css text shadow</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
<style>

body {
  margin: 50px 50px;
  background: #fff;
  text-align: center;
}
div {
  margin:20px;
}
.demo {
      background: #666666;
      width: 440px;
      padding: 30px;
      font: bold 55px/100% "微軟雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;
      color: #fff;
      text-transform: uppercase;
}
.demo1 {
  color: #fff;
  text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);
}
.demo2 {
  color: #fff;
  text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8);
}
.demo3 {
  color: #eee;
  text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
}
.demo4 {
  color: rgba(255, 179, 140,0.5);
  text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
}
</style>

</head>

<body>

  <div class="demo demo1">3d text effect</div>

  <div class="demo demo2">3d text effect</div>

  <div class="demo demo3">Vintage retro text effect</div>

  <div class="demo demo4">Anaglyphic text effect</div>

</body>

</html>

execcode getcode

代碼解釋

1、3D文字效果運用原理就是像Photoshop一樣，我們在文字的下方或上方復制了多個圖層，并把每一個層向左上或右下方向移動一個1px距離，從而制作出3D效果。同時我們層數(shù)越多，其越厚重。換成用text-shadow制作就是使用多個陰影，并把陰影色設置相同，給其使用rgba色效果更佳。

2、Vintage retro這種風格的文字效果是由兩個文本陰影合成的，這里需要注意的是：第一個陰影色和背景色相同；文本前景色和第二個陰影色相同。

3、anaglyphic文字效果起到一種補色的效果，從而制作出一種三維效果圖。其效果是用css重新使用的文字陰影和文本前景的rgba色組合而成。在文本的前景色和陰影上同時使用rgba色，使底層的文字是通過影子可見。

文章推薦

CSS3實現(xiàn)的9種文本陰影效果