89 lines
2.1 KiB
HTML
89 lines
2.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>CodePen - Emojis as mask images</title>
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<css-doodle click-to-update>
|
||
|
|
:doodle {
|
||
|
|
@grid: 5x1 / 100%;
|
||
|
|
mask-image: @svg(
|
||
|
|
<svg viewBox="0 0 10 10">
|
||
|
|
<text font-size="9" x=".5" y="8.5">🦋</text>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
@place-cell: center;
|
||
|
|
@size: 100%;
|
||
|
|
@random {
|
||
|
|
filter: drop-shadow(0 0 2px #fff);
|
||
|
|
}
|
||
|
|
background: @m500(
|
||
|
|
radial-gradient(
|
||
|
|
@p(#481380, #7f78d2, #efb1ff, #ffe2ff) 50%,
|
||
|
|
transparent 0
|
||
|
|
)
|
||
|
|
@r(100%) @r(100%) / @r(5px) @lr
|
||
|
|
no-repeat
|
||
|
|
);
|
||
|
|
</css-doodle>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<css-doodle click-to-update>
|
||
|
|
:doodle {
|
||
|
|
@grid: 50x1 / 100%;
|
||
|
|
mask-image: @svg(
|
||
|
|
<svg viewBox="0 0 10 10">
|
||
|
|
<text font-size="9" x=".5" y="8.5">❤️</text>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
@place-cell: @r(100%) @r(100%);
|
||
|
|
:after {
|
||
|
|
content: '❤️';
|
||
|
|
font-size: @r(18px);
|
||
|
|
color: transparent;
|
||
|
|
text-shadow: @m10(
|
||
|
|
@r(±50px) @r(±50px) 0 @p(#5fdde5, #f4ea8e, #f37121, #d92027)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
</css-doodle>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<css-doodle>
|
||
|
|
:doodle {
|
||
|
|
@grid: 32 / 100%;
|
||
|
|
mask-image: @svg(
|
||
|
|
<svg viewBox="0 0 10 10">
|
||
|
|
<text font-size="9" x=".5" y="8.5">⛱</text>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
border-radius: 50%;
|
||
|
|
background: @p(#fff, #ffd31d, #ff427f, transparent);
|
||
|
|
--t: scale(@r(.1, .4)) scaleY(4);
|
||
|
|
transform: @var(--t);
|
||
|
|
@keyframes f {
|
||
|
|
from { transform: var(--t) translateY(-400%); }
|
||
|
|
to { transform: var(--t) translateY(400%); }
|
||
|
|
}
|
||
|
|
@random(.2) {
|
||
|
|
animation: f @r(3s, 8s) linear infinite;
|
||
|
|
animation-delay: -@r(10s);
|
||
|
|
}
|
||
|
|
</css-doodle>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- partial -->
|
||
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.8.5/css-doodle.min.js'></script>
|
||
|
|
</body>
|
||
|
|
</html>
|