前端开发者学堂 - fedev.cn

Pure CSS3 3D Text Effects

#text-shadow
发布于 大漠

3D的文字特效都是通过text-shadow属性来制作的，其原理很简单，就是多个text-shadow的属性值叠加，模拟出3D的效果。其中主要一点就是掌握角度值，也就是X轴和Y轴的位置。今天我通过3D css Text Generator在线工具，生成了0、45、90、135、180、224、270、315和360九个不同角度的3D文字效果，将其代码放上来给大家参考。当然大家还可以通过这个在线工具，设计相关的参数。工具使用方法很简单，我就不细说了。

demodownload

HTML CODE

<div class="text-wrap box1">W3cplus (0 deg)</div>

CSS CODE

body{background-color: #665757;}
.text-wrap {
  width: 600px;
  min-height: 100px;
  margin: 20px auto;
  padding: 30px 0;
  border: 5px solid #ccc;
  position: relative;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.80);
  clear: both;
  font-family: 'Aclonica', serif;
  font-size: 50px;
  text-align: center;
  color: #f7edf7;
}
.box1 {
  text-shadow:0px 0px 0 rgb(188,178,188),1px 0px 0 rgb(173,163,173),2px 0px 0 rgb(157,147,157),3px 0px 0 rgb(142,132,142),4px 0px 0 rgb(126,116,126),5px 0px 0 rgb(111,101,111),6px 0px 0 rgb(95,85,95), 7px 0px 0 rgb(79,69,79),8px 0px 7px rgba(0,0,0,0.35),8px 0px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
}
.box2 {
  text-shadow:0px 0px 0 rgb(188,178,188),1px -1px 0 rgb(173,163,173),2px -2px 0 rgb(157,147,157),3px -3px 0 rgb(142,132,142),4px -4px 0 rgb(126,116,126),5px -5px 0 rgb(111,101,111),6px -6px 0 rgb(95,85,95), 7px -7px 0 rgb(79,69,79),8px -8px 7px rgba(0,0,0,0.35),8px -8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
}
.box3 {
  text-shadow:0px 0px 0 rgb(188,178,188),0px -1px 0 rgb(173,163,173),0px -2px 0 rgb(157,147,157),0px -3px 0 rgb(142,132,142),0px -4px 0 rgb(126,116,126),0px -5px 0 rgb(111,101,111),0px -6px 0 rgb(95,85,95), 0px -7px 0 rgb(79,69,79),0px -8px 7px rgba(0,0,0,0.35),0px -8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
}
.box4 {
  text-shadow:0px 0px 0 rgb(188,178,188),-1px -1px 0 rgb(173,163,173),-2px -2px 0 rgb(157,147,157),-3px -3px 0 rgb(142,132,142),-4px -4px 0 rgb(126,116,126),-5px -5px 0 rgb(111,101,111),-6px -6px 0 rgb(95,85,95), -7px -7px 0 rgb(79,69,79),-8px -8px 7px rgba(0,0,0,0.35),-8px -8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
}
.box5 {
  text-shadow:0px 0px 0 rgb(188,178,188),-1px 0px 0 rgb(173,163,173),-2px 0px 0 rgb(157,147,157),-3px 0px 0 rgb(142,132,142),-4px 0px 0 rgb(126,116,126),-5px 0px 0 rgb(111,101,111),-6px 0px 0 rgb(95,85,95), -7px 0px 0 rgb(79,69,79),-8px 0px 7px rgba(0,0,0,0.35),-8px 0px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
}

.box6 {
  text-shadow:0px 0px 0 rgb(188,178,188),-1px 1px 0 rgb(173,163,173),-2px 2px 0 rgb(157,147,157),-3px 3px 0 rgb(142,132,142),-4px 4px 0 rgb(126,116,126),-5px 5px 0 rgb(111,101,111),-6px 6px 0 rgb(95,85,95), -7px 7px 0 rgb(79,69,79),-8px 8px 7px rgba(0,0,0,0.35),-8px 8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
}
.box7 {
  text-shadow:0px 0px 0 rgb(188,178,188),0px 1px 0 rgb(173,163,173),0px 2px 0 rgb(157,147,157),0px 3px 0 rgb(142,132,142),0px 4px 0 rgb(126,116,126),0px 5px 0 rgb(111,101,111),0px 6px 0 rgb(95,85,95), 0px 7px 0 rgb(79,69,79),0px 8px 7px rgba(0,0,0,0.35),0px 8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
}
.box8 {
  text-shadow:0px 0px 0 rgb(188,178,188),1px 1px 0 rgb(173,163,173),2px 2px 0 rgb(157,147,157),3px 3px 0 rgb(142,132,142),4px 4px 0 rgb(126,116,126),5px 5px 0 rgb(111,101,111),6px 6px 0 rgb(95,85,95), 7px 7px 0 rgb(79,69,79),8px 8px 7px rgba(0,0,0,0.35),8px 8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
}
.box9{
  text-shadow:0px 0px 0 rgb(188,178,188),1px 0px 0 rgb(173,163,173),2px 0px 0 rgb(157,147,157),3px 0px 0 rgb(142,132,142),4px 0px 0 rgb(126,116,126),5px 0px 0 rgb(111,101,111),6px 0px 0 rgb(95,85,95), 7px 0px 0 rgb(79,69,79),8px 0px 7px rgba(0,0,0,0.35),8px 0px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
}

以上代码来自于3D css Text Generator在线工具生成。

demodownload

3D css Text Generator

3d css text generator

如需转载，烦请注明出处：https://www.fedev.cn/demo/pure-css3-3d-text-effects.html

Air Precision 2017