css3点赞加一效果

CSS3点赞加一效果已经成为了现代网站设计中不可或缺的一部分。这个效果能够在用户点赞的同时实现一个动画效果，增加页面的交互性和美观性。下面是一个简单的CSS3点赞加一效果的实例。

html:div class="like">
    /div>
    a href="#" class="like-btn">
    /a>
CSS:.like {
    width: 50px;
    height: 50px;
    background: #ccc;
    border-radius: 50%;
    position: relative;
    margin: 100px auto;
}
.like:before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all .5s;
}
.like-btn {
    display: block;
    width: 100px;
    height: 50px;
    background: #3498db;
    text-align: center;
    line-height: 50px;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    position: relative;
    margin: 50px auto;
}
.like-btn:before {
    content: '';
    width: 30px;
    height: 30px;
    background: #fff;
    position: absolute;
    top: 10%;
    left: -10%;
    border-radius: 50%;
    transform: scale(0);
    transition: all .5s;
}
.like-btn:after {
    content: '';
    width: 30px;
    height: 30px;
    background: #fff;
    position: absolute;
    top: 10%;
    right: -10%;
    border-radius: 50%;
    transform: scale(0);
    transition: all .5s;
}
.like-btn:active:before, .like-btn:active:after {
    transform: scale(1);
}
.like-btn:before {
    transform-origin: bottom right;
}
.like-btn:after {
    transform-origin: bottom left;
}
.like-btn.clicked:before, .like-btn.clicked:after {
    transform: scale(1);
}
.like-btn.clicked:before {
    animation: animateToLeft .5s linear both;
}
.like-btn.clicked:after {
    animation: animateToRight .5s linear both;
}
@keyframes animateToLeft {
0% {
    transform: scale(1) rotate(0);
}
100% {
    transform: scale(.3) rotate(270deg);
}
}
@keyframes animateToRight {
0% {
    transform: scale(1) rotate(0);
}
100% {
    transform: scale(.3) rotate(-270deg);
}
}
    

在上面的代码中，我们使用了伪元素:before和:after，以及CSS3的动画效果来实现点赞加一的动画效果。具体来说，我们首先定义了一个圆形容器.like，然后定义了一个类like-btn来表示点赞按钮。在点赞按钮被点击时，通过添加类clicked，我们就可以移动圆形元素.like的中心点，并通过动画的方式实现赞加一效果。

总结来说，CSS3点赞加一效果是现代网站设计中的一个重要组成部分，它能够增强网站的交互性和美观性。在实现点赞加一效果时，我们可以通过使用伪元素和CSS3动画效果来实现。

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