thisiszeev
/
css-tricks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added beating-heart

This commit is contained in:
ZAKS Web 2025-04-22 16:12:47 +02:00
parent 7120f1b85d
commit bd586d5413
4 changed files with 134 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
beating-heart/beating-heart.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 MiB

134
beating-heart/beating-heart.html Normal file
View File

@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>I Love You, Baby</title>
<style>
body {
background: #ffdee9;
background: linear-gradient(to right, #ffdee9, #b5fffc);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
font-family: 'Segoe UI', sans-serif;
}
.heart {
width: 100px;
height: 90px;
position: relative;
animation: beat 1.5s infinite 10s;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
width: 1px;
height: 1px;
background: red;
border-radius: 0 0 0 0;
}
.heart::before {
left: 0px;
transform: rotate(0deg);
transform-origin: 0% 100%;
animation: heartone 5s forwards, hearttwo 5s forwards 5s;
}
.heart::after {
left: 0px;
transform: rotate(0deg);
transform-origin: 100% 100%;
animation: heartone 5s forwards, heartthree 5s forwards 5s;
}
@keyframes heartone {
0% {
width: 1px;
height: 1px;
border-radius: 0 0 0 0;
}
50% {
width: 50px;
height: 90px;
border-radius: 0 0 0 0;
}
100% {
width: 50px;
height: 90px;
border-radius: 50px 50px 0 0;
}
}
@keyframes hearttwo {
0% {
left: 0px;
transform: rotate(0deg);
transform-origin: 0% 100%;
}
50% {
left: 50px;
transform: rotate(0deg);
transform-origin: 0% 100%;
}
100% {
left: 50px;
transform: rotate(-45deg);
transform-origin: 0% 100%;
}
}
@keyframes heartthree {
0% {
left: 0px;
transform: rotate(0deg);
transform-origin: 100% 100%;
}
50% {
left: 0px;
transform: rotate(0deg);
transform-origin: 100% 100%;
}
100% {
left: 0px;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
}
@keyframes beat {
0%, 30%, 50%, 70%, 100% {
transform: scale(1);
}
40% {
transform: scale(1.5) skewY(-15deg);
}
60% {
transform: scale(1.5) skewY(15deg);
}
}
h1 {
color: #e6005c;
margin-top: 30px;
font-size: 2.2em;
}
p {
font-size: 1.2em;
margin-top: 10px;
color: #444;
}
</style>
</head>
<body>
<div class="heart"></div>
<h1>I Love You, Baby</h1>
<p>You + Me = Perfect Code</p>
</body>
</html>

BIN
beating-heart/beating-heart.mp4 Normal file
View File

Binary file not shown.

BIN
beating-heart/beating-heart.webm Normal file
View File

Binary file not shown.