css射线点赞动画 |js改变css属性

/*设置主容器*/
.container{
position: relative;
height: 100px;
width: 100px;
margin: 0 auto;
}
/*设置点赞按钮*/
.like{
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
background-color: #ffffff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
/*设置射线动画*/
.like:before, .like:after{
content: "";
position: absolute;
width: 3px;
height: 0;
background-color: #ffffff;
opacity: 0.8;
}
.like:before{
top: -20px;
left: 16px;
transform: rotate(45deg);
}
.like:after{
top: -20px;
left: -16px;
transform: rotate(-45deg);
}
/*设置CSS动画*/
@keyframes rayAnimation{
to{
height: 90px;
}
}
/*设置事件监听*/
.like.clicked:before, .like.clicked:after{
animation: rayAnimation 0.3s ease forwards;
}
.like.clicked{
background-color: #ed4956;
}

以上就是实现射线点赞动画的CSS代码，大家可以将这些代码放入到HTML文件中，来实现一个非常炫酷的点赞效果。