CSS3彩虹愛心

.heart {
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0, 0.7);
position: relative;
transform: rotate(45deg);
}
.heart:before,
.heart:after {
content: "";
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0, 0.7);
border-radius: 50% 50% 0 0;
position: absolute;
}
.heart:before {
top: -50px;
left: 0;
}
.heart:after {
top: 0;
left: 50px;
transform: rotate(90deg);
}
.heart:hover,
.heart:hover:before,
.heart:hover:after {
background-color: rgba(255, 127, 0, 0.7);
}
.heart:before,
.heart:after {
animation: pulse 1s ease-out infinite;
transform-origin: 50% 0%;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}

現在，你可以在你的網站上使用這個可愛的彩虹愛心了！