纯 css 文字倒影样式,效果如下:
HTML 代码:
<h1 data-text="MYBJ123.com"> MYBJ123.coM </h1>
CSS 代码:
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab'); body { margin:0; padding:0; background: radial-gradient(#900C3F, #581845); height: 100vh; } h1 { margin:0; padding:0; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); font-family: 'Roboto Slab', serif; text-transform: uppercase; color:#f1c40f; font-size: 8em; } h1:before { content: attr(data-text); position:absolute; top:0; left:0; transform-origin: bottom; transform: rotateX(180deg); line-height: 1em; background: linear-gradient(0deg, #f1c40f 0, transparent 80%); -webkit-background-clip: text; color: transparent; opacity: 0.6; }