3D文字效果

下载代码

html

css

分享到微信朋友圈

html

css

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 2em;
  background-position: fixed;
  background: linear-gradient(180deg, #f14, #ff8300);
  font-family: "Avenir Next Condensed", sans-serif;
}

h1 {
  color: #613;
  text-align: center;
}

h2 {
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  font-size: 10em;
}

.filter-shadow {
  color: transparent;
  background: linear-gradient(180deg, #fefefe, #bbb);
  -webkit-background-clip: text;
  -webkit-filter: drop-shadow(-1px -1px white) drop-shadow(1px 1px gray) drop-shadow(1px 1px #7a7a7a) drop-shadow(1px 1px #757575) drop-shadow(1px 1px #707070) drop-shadow(1px 1px #6b6b6b) drop-shadow(1px 1px #666666) drop-shadow(1px 1px #616161) drop-shadow(1px 1px #5c5c5c) drop-shadow(1px 1px #575757) drop-shadow(1px 1px #525252) drop-shadow(1px 1px #4d4d4d) drop-shadow(12px 12px 30px rgba(0, 0, 0, 0.2)) drop-shadow(12px 12px 10px rgba(0, 0, 0, 0.2));
}

.text-shadow {
  color: #f4f4f4;
  text-shadow: -1px -1px white, 1px 1px gray, 2px 2px #7a7a7a, 3px 3px #757575, 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 11px #4d4d4d, 18px 18px 30px rgba(0, 0, 0, 0.4), 18px 18px 10px rgba(0, 0, 0, 0.4);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg