实例演示_CSS3实现的4种3D文字效果，代码简单，效果震撼

<!DOCTYPE html>
<html>

<head>

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>

<p style="float:left;padding:2px;background:#c3c3c3;">demo1</p>
  <div class="demo demo1">3d text effect</div>

<p style="float:left;padding:2px;background:#c3c3c3;">demo2</p>
  <div class="demo demo2">3d text effect</div>

<p style="float:left;padding:2px;background:#c3c3c3;">demo3</p>
  <div class="demo demo3">Vintage retro text effect</div>

<p style="float:left;padding:2px;background:#c3c3c3;">demo4</p>
  <div class="demo demo4">anaglyphic text effect</div>

</body>

</html>

卡卡测速网> html技术> CSS3实现的4种3D文字效果，代码简单，效果震撼

添加收藏下载源代码|

运行结果

demo.html

运行代码

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX