css3点赞爱心

CSS3的点赞爱心效果已经成为了网页设计中不可或缺的一部分，简单的代码实现了华丽动人的效果，让人惊叹不已。

.heart{
    display:inline-block;
    width:30px;
    height:30px;
    background-color:#9a0c45;
    position:relative;
    margin-right:5px;
}
.heart:before,.heart:after{
    content:"";
    position:absolute;
    left:15px;
    top:0px;
    width:15px;
    height:24px;
    background-color:#9a0c45;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
    border-radius:10px 0px 0px 10px;
}
.heart:after{
    left:0px;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    border-radius:0px 10px 10px 0px;
}
.heart:hover{
    background-color:#f44336;
}
.heart:hover:before,.heart:hover:after{
    background-color:#f44336;
}
    

解释一下代码：

.heart

这个是定义了一个类名，我们在HTML标签中只要加上这个类名就可以实现一个红色的心形按钮。

display:inline-block;
    

这句代码是让这个按钮可以像文字一样在行内显示。

width:30px;
    height:30px;
    

这是定义按钮的宽度和高度。

background-color:#9a0c45;
    

这句是定义背景颜色，由于我们要实现的是一个红色的心形按钮，所以这里设成了深红色。

position:relative;
    

这是定义相对位置，为了后续好实现伪元素。

margin-right:5px;

这是定义按钮和按钮之间的间距。

.heart:before,.heart:after{
    content:"";
    position:absolute;
    left:15px;
    top:0px;
    width:15px;
    height:24px;
    background-color:#9a0c45;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
    border-radius:10px 0px 0px 10px;
}
.heart:after{
    left:0px;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    border-radius:0px 10px 10px 0px;
}

这代码是定义两个伪元素，前伪元素和后伪元素，这里我们用伪元素加上CSS3旋转、圆角等特效实现了一个可爱漂亮的心形图案。

.heart:hover{
    background-color:#f44336;
}
.heart:hover:before,.heart:hover:after{
    background-color:#f44336;
}
    

这部分代码是实现鼠标悬停时按钮颜色和图案变化效果。

这样我们就可以用上述代码，实现一个简单木讷却又可爱动人的点赞爱心按钮啦！

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