Skip to content

Instantly share code, notes, and snippets.

@bozzin
Created June 15, 2020 00:14
Show Gist options
  • Save bozzin/795580fc21bfec55f2065f0f898b5f06 to your computer and use it in GitHub Desktop.
Save bozzin/795580fc21bfec55f2065f0f898b5f06 to your computer and use it in GitHub Desktop.
Floating heart
<style>
css-doodle {
--color: @p(#51eaea, #fffde1, #ff9d76, #FB3569);
--rule: (
:doodle {
@grid: 30x1 / 18vmin;
--deg: @p(-180deg, 180deg);
}
:container {
perspective: 30vmin;
}
:after, :before {
content: '';
background: var(--color);
@place-cell: @r(100%) @r(100%);
@size: @r(6px);
@shape: heart;
}
@place-cell: center;
@size: 100%;
box-shadow: @m2(0 0 50px var(--color));
background: @m100(
radial-gradient(var(--color) 50%, transparent 0)
@r(-20%, 120%) @r(-20%, 100%) / 1px 1px
no-repeat
);
will-change: transform, opacity;
animation: scale-up 12s linear infinite;
animation-delay: calc(-12s / @size() * @i());
@keyframes scale-up {
0%, 95.01%, 100% {
transform: translateZ(0) rotate(0);
opacity: 0;
}
10% {
opacity: 1;
}
95% {
transform:
translateZ(35vmin) rotateZ(@var(--deg));
}
}
)
}
</style>
<css-doodle use="var(--rule)"></css-doodle>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.2/css-doodle.min.js"></script>
html, body {
width: 100%;
height: 100%;
margin: 0;
background: #270F34;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment