CSS射線點贊動畫是一種十分酷炫的頁面效果，讓網頁更加美觀動感，為網頁的交互體驗增添了不少色彩，下面我們就通過幾行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文件中，來實現一個非常炫酷的點贊效果。