css3点赞效果

在现在越来越多的Web应用中，点赞功能已经成为了必备的功能之一。要让这个功能变得更加有趣和美观，我们可以使用CSS3来实现点赞效果。

.like {
    display: inline-block;
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.like:hover, .like.active {
    background: #2196F3;
    border-color: #2196F3;
    color: #fff;
}
    

以上CSS代码使用了border、border-radius、color、cursor、display等CSS属性来设置点赞的样式。其中，display属性为inline-block，让点赞按钮具有行内块级元素的特性，能够使多个点赞按钮并排横向排列。而padding、border-radius、color等属性则设置了按钮的内边距、圆角、字体颜色等。

下面的:hover伪类和.active类则实现了点赞按钮在鼠标移动到按钮上或者已经被点赞的情况下的样式，让按钮变成固定颜色的背景和白色字体。这就是在无需JavaScript的情况下，使用CSS3轻松实现点赞效果的方式。

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