html代码大全爱心

HTML代码大全中，最受喜爱的无疑是爱心图标代码。在许多网页中，爱心图标常常被用来代表爱情、友谊、感激等诸多情感。下面就来介绍一下几种常用的爱心图标代码。

/* 空心爱心 */.heart {
        position: relative;
        width: 20px;
        height: 20px;
        margin: auto;
        transform: rotate(-45deg);
        border-width: 2px;
        border-style: solid;
        border-color: #FFC0CB;
}
.heart:before,.heart:after {
        content: "";
        position: absolute;
        width: inherit;
        height: inherit;
        border-radius: 50% 50% 0 0;
        border-width: inherit;
        border-style: inherit;
        border-color: inherit;
        transform: rotate(45deg);
}
.heart:before {
        top: -10px;
}
.heart:after {
        left: -10px;
}
/* 实心爱心 */.heart-filled {
        position: relative;
        width: 20px;
        height: 20px;
        margin: auto;
        transform: rotate(-45deg);
        background-color: #FFC0CB;
}
.heart-filled:before,.heart-filled:after {
        content: "";
        position: absolute;
        width: inherit;
        height: inherit;
        border-radius: 50% 50% 0 0;
        transform: rotate(45deg);
        background-color: #FFC0CB;
}
.heart-filled:before {
        top: -10px;
}
.heart-filled:after {
        left: -10px;
}
/* 漂浮的爱心 */.heart-floating {
        animation: float 2.5s ease infinite;
}
@keyframes float {
    0% {
            transform: translatey(0px);
    }
    50% {
            transform: translatey(-15px);
    }
    100% {
            transform: translatey(0px);
    }
}
    

以上便是几种常见的爱心图标代码，开发者们可根据实际情况进行调整，使用在自己的网页中，创造出不同颜色、形状、大小的爱心图标，为用户呈现出更加温馨、浪漫的页面效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！