Jelly love
1. Love
2. Jelly
In terms of love
Juejin. Cn/post / 702628…
A beating heart in my previous blog
So let’s cut to the chase. Jelly
Jelly effects
A little Duang Duang Duang special effect
Go straight to code
<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 100px;
width: 100px;
transform: rotate(-45deg);
}
.heart:after,
.heart:before {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 100px;
height: 100px;
top: 0px;
left: 50px;
}
.heart:before {
top: -50px;
left: 0px;
}
button {
z-index: 1;
border: none;
}
button:hover {
cursor: pointer; // Cursor changeanimation: jelly 0.5 s;
}
@keyframes jelly {
0%.100% {
transform: scale(1.1) rotate(-45deg); Rotate rotate rotate rotate rotate rotate25%.75% {
transform: scale(0.9.1.1) rotate(-45deg);
}
50% {
transform: scale(1.1.0.9) rotate(-45deg); }}body {
width: 100vw;
height: 100vw;
overflow: hidden;
background-image: linear-gradient(to bottom, rgb(234.124.240), rgb(23.221.40));
}
</style>
Copy the code
html
<body>
<button class="heart"></button>
</body>
Copy the code
Another day of CSS animation practice.