CSS 字体配景波浪

吴旭华 · 6 天前

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体背景波浪</title>
<style>
/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
width: fit-content;
font-size: 40px;
line-height: 1.5;
font-family: system-ui,sans-serif;
font-weight: bold;
text-transform: uppercase;
color: #0000;
-webkit-text-stroke: 1px #000;
background:
radial-gradient(1.13em at 50% 1.6em,#000 99%,#0000 101%) calc(50% - 1.6em) 0/3.2em 100% text,
radial-gradient(1.13em at 50% -0.8em,#0000 99%,#000 101%) 50% .8em/3.2em 100% repeat-x text;
animation: l9 2s linear infinite;
}
.loader:before {
content: "梦雨生生";
}
@keyframes l9 {
to {background-position: calc(50% + 1.6em) 0,calc(50% + 3.2em) .8em}
}
</style>
</head>
<body>
<div id="container">
<div class="loader"></div>
</div>
<script>
</script>
</body>
</html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

0 个回复