47 lines
1.4 KiB
HTML
47 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>投影效果</title>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
|
<style>
|
|
.ciy-shadow {
|
|
position: relative;
|
|
font-size: 7em;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
background: linear-gradient(#025d84, #22b3f1);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.ciy-shadow::before {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
text-shadow: 1px 1px 0 #000000, 2px 2px 0 #000000, 3px 3px 4px #000000;
|
|
}
|
|
|
|
.ciy-shadow::after {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
color: #000000;
|
|
z-index: -1;
|
|
transform: translate(0.6em, 0.25em) scaleY(0.5) skew(-50deg);
|
|
filter: blur(0.05em);
|
|
mask: linear-gradient(transparent, #000000aa);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="ciy-shadow" data-text="众产平台" style="margin:10rem;">众产平台</div>
|
|
</body>
|
|
|
|
</html> |