点击查看html编辑器说明文档

CSS 文字倒影edit icon

|
|
Fork(复制)
|
|
作者:
lynn-ssk
提交反馈
嵌入
设置
下载
HTML
格式化
支持Emmet,输入 p 后按 Tab键试试吧!
<head> ...
展开
</head>
<body>
<div class=units>
  <div>hello world</div>
  <div>hello world</div>
</div>
</body>
CSS
格式化
.units > :last-child {
  transform: rotatex(180deg) translatey(15px);

  -webkit-mask-image: 
    repeating-linear-gradient(
      transparent,
      transparent 3px,
      white 3px,
      white 4px
    ),
    linear-gradient(transparent 50%, white 90%)
  ;
}
/* original design */
.units > * {
  font: bolder 5rem/5rem "EB Garamond";
}
.units {
  width: max-content;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  padding: 0 10px;
  display: inline-block;
}
body {
  text-align: center;
  margin-top: calc(50vh - 5rem);
}
JS
格式化
预览
控制台