纯css文字倒影样式,效果如下:

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;
}

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS文字倒影效果

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们