-
Notifications
You must be signed in to change notification settings - Fork 0
/
heart.css
36 lines (34 loc) · 711 Bytes
/
heart.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
body{
background-color: #3e0000;
margin: 0;
padding: 0;
}.heart{
width: 180px;
height: 100px;
position: absolute;
top: 40%;
left: 35%;
background: #ff3e3e;
transition: 1s;
transform-origin: right bottom;
}
.heart::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #fff;
transition: 2s;
transform-origin: right bottom;
}
.heart:hover{
transform: rotate(45deg);
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
.heart:hover::before{
transform: rotate(450deg)translateY(100px);
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
background: #e22c2c;
}