css 3d 阴影

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background: #E0E0E0;
  font-size: 170px;
  text-align: center;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
}

.font, .font span {
  transition: 2s;
}

.font {
  cursor: pointer;
  -webkit-transform: translate3d(0, 50%, 0) rotate(0deg);
  color: #E0E0E0;
  text-shadow: -1px 1px 0 rgba(160, 160, 160, 0.1), 1px -1px 0 rgba(255, 255, 255, 0.1), 1px -1px 25px white, -1px 1.9px 1px #a0a0a0, -2px 3.8px 2px #a0a0a0, -3px 5.7px 3px rgba(160, 160, 160, 0.66667), -4px 7.6px 4px rgba(160, 160, 160, 0.5), -5px 9.5px 5px rgba(160, 160, 160, 0.4), -6px 11.4px 6px rgba(160, 160, 160, 0.33333), -7px 13.3px 7px rgba(160, 160, 160, 0.28571), -8px 15.2px 8px rgba(160, 160, 160, 0.25), -9px 17.1px 9px rgba(160, 160, 160, 0.22222), -10px 19px 10px rgba(160, 160, 160, 0.2), -11px 20.9px 11px rgba(160, 160, 160, 0.18182), -12px 22.8px 12px rgba(160, 160, 160, 0.16667), -13px 24.7px 13px rgba(160, 160, 160, 0.15385), -14px 26.6px 14px rgba(160, 160, 160, 0.14286), -15px 28.5px 15px rgba(160, 160, 160, 0.13333), -16px 30.4px 16px rgba(160, 160, 160, 0.125), -17px 32.3px 17px rgba(160, 160, 160, 0.11765), -18px 34.2px 18px rgba(160, 160, 160, 0.11111), -19px 36.1px 19px rgba(160, 160, 160, 0.10526), -20px 38px 20px rgba(160, 160, 160, 0.1), -21px 39.9px 21px rgba(160, 160, 160, 0.09524), -22px 41.8px 22px rgba(160, 160, 160, 0.09091), -23px 43.7px 23px rgba(160, 160, 160, 0.08696), -24px 45.6px 24px rgba(160, 160, 160, 0.08333), -25px 47.5px 25px rgba(160, 160, 160, 0.08);
}
.font span {
  color: salmon;
  text-shadow: -1px 1px 0 rgba(147, 118, 115, 0.1), 1px -1px 0 rgba(252, 172, 163, 0.1), 1px -1px 25px #fcaca3, -1px 1.9px 1px #937673, -2px 3.8px 2px #937673, -3px 5.7px 3px rgba(147, 118, 115, 0.66667), -4px 7.6px 4px rgba(147, 118, 115, 0.5), -5px 9.5px 5px rgba(147, 118, 115, 0.4), -6px 11.4px 6px rgba(147, 118, 115, 0.33333), -7px 13.3px 7px rgba(147, 118, 115, 0.28571), -8px 15.2px 8px rgba(147, 118, 115, 0.25), -9px 17.1px 9px rgba(147, 118, 115, 0.22222), -10px 19px 10px rgba(147, 118, 115, 0.2), -11px 20.9px 11px rgba(147, 118, 115, 0.18182), -12px 22.8px 12px rgba(147, 118, 115, 0.16667), -13px 24.7px 13px rgba(147, 118, 115, 0.15385), -14px 26.6px 14px rgba(147, 118, 115, 0.14286), -15px 28.5px 15px rgba(147, 118, 115, 0.13333), -16px 30.4px 16px rgba(147, 118, 115, 0.125), -17px 32.3px 17px rgba(147, 118, 115, 0.11765), -18px 34.2px 18px rgba(147, 118, 115, 0.11111), -19px 36.1px 19px rgba(147, 118, 115, 0.10526), -20px 38px 20px rgba(147, 118, 115, 0.1), -21px 39.9px 21px rgba(147, 118, 115, 0.09524), -22px 41.8px 22px rgba(147, 118, 115, 0.09091), -23px 43.7px 23px rgba(147, 118, 115, 0.08696), -24px 45.6px 24px rgba(147, 118, 115, 0.08333), -25px 47.5px 25px rgba(147, 118, 115, 0.08);
}
.font:hover {
  -webkit-transform: translate3d(0, 100%, 0) rotate(-90deg);
  text-shadow: -1px -1px 0 rgba(173, 173, 173, 0.1), 1px 1px 0 rgba(255, 255, 255, 0.1), 1px -1px 25px white, -1px -1.9px 1px #adadad, -2px -3.8px 2px #adadad, -3px -5.7px 3px rgba(173, 173, 173, 0.66667), -4px -7.6px 4px rgba(173, 173, 173, 0.5), -5px -9.5px 5px rgba(173, 173, 173, 0.4), -6px -11.4px 6px rgba(173, 173, 173, 0.33333), -7px -13.3px 7px rgba(173, 173, 173, 0.28571), -8px -15.2px 8px rgba(173, 173, 173, 0.25), -9px -17.1px 9px rgba(173, 173, 173, 0.22222), -10px -19px 10px rgba(173, 173, 173, 0.2), -11px -20.9px 11px rgba(173, 173, 173, 0.18182), -12px -22.8px 12px rgba(173, 173, 173, 0.16667), -13px -24.7px 13px rgba(173, 173, 173, 0.15385), -14px -26.6px 14px rgba(173, 173, 173, 0.14286), -15px -28.5px 15px rgba(173, 173, 173, 0.13333), -16px -30.4px 16px rgba(173, 173, 173, 0.125), -17px -32.3px 17px rgba(173, 173, 173, 0.11765), -18px -34.2px 18px rgba(173, 173, 173, 0.11111), -19px -36.1px 19px rgba(173, 173, 173, 0.10526), -20px -38px 20px rgba(173, 173, 173, 0.1), -21px -39.9px 21px rgba(173, 173, 173, 0.09524), -22px -41.8px 22px rgba(173, 173, 173, 0.09091), -23px -43.7px 23px rgba(173, 173, 173, 0.08696), -24px -45.6px 24px rgba(173, 173, 173, 0.08333), -25px -47.5px 25px rgba(173, 173, 173, 0.08);
}
.font:hover span {
  color: salmon;
  text-shadow: -1px -1px 0 rgba(147, 118, 115, 0.1), 1px 1px 0 rgba(252, 172, 163, 0.1), 1px -1px 25px #fcaca3, -1px -1.9px 1px #937673, -2px -3.8px 2px #937673, -3px -5.7px 3px rgba(147, 118, 115, 0.66667), -4px -7.6px 4px rgba(147, 118, 115, 0.5), -5px -9.5px 5px rgba(147, 118, 115, 0.4), -6px -11.4px 6px rgba(147, 118, 115, 0.33333), -7px -13.3px 7px rgba(147, 118, 115, 0.28571), -8px -15.2px 8px rgba(147, 118, 115, 0.25), -9px -17.1px 9px rgba(147, 118, 115, 0.22222), -10px -19px 10px rgba(147, 118, 115, 0.2), -11px -20.9px 11px rgba(147, 118, 115, 0.18182), -12px -22.8px 12px rgba(147, 118, 115, 0.16667), -13px -24.7px 13px rgba(147, 118, 115, 0.15385), -14px -26.6px 14px rgba(147, 118, 115, 0.14286), -15px -28.5px 15px rgba(147, 118, 115, 0.13333), -16px -30.4px 16px rgba(147, 118, 115, 0.125), -17px -32.3px 17px rgba(147, 118, 115, 0.11765), -18px -34.2px 18px rgba(147, 118, 115, 0.11111), -19px -36.1px 19px rgba(147, 118, 115, 0.10526), -20px -38px 20px rgba(147, 118, 115, 0.1), -21px -39.9px 21px rgba(147, 118, 115, 0.09524), -22px -41.8px 22px rgba(147, 118, 115, 0.09091), -23px -43.7px 23px rgba(147, 118, 115, 0.08696), -24px -45.6px 24px rgba(147, 118, 115, 0.08333), -25px -47.5px 25px rgba(147, 118, 115, 0.08);
}

JavaScript

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