CSS可以進行許多有趣的動畫效果。今天我們來介紹一種叫做“一箭穿心”的動畫。

.arrow{
position: relative;
width: 200px;
height: 200px;
background: url(arrow.png);
}
.arrow::before{
content: '';
position: absolute;
top: 50%;
left: -10px;
width: 10px;
height: 1px;
background-color: red;
transform: translateY(-50%) rotate(-45deg);
transition: all .3s ease-in-out;
}
.arrow:hover::before{
left: -20px;
}
.arrow::after{
content: '';
position: absolute;
top: 50%;
right: -10px;
width: 10px;
height: 1px;
background-color: red;
transform: translateY(-50%) rotate(45deg);
transition: all .3s ease-in-out;
}
.arrow:hover::after{
right: -20px;
}

以上是一箭穿心動畫的CSS代碼。其中，我們在箭頭兩側通過偽元素before和after創建了兩根白線，并在hover時使其向左右分別移動，形成了一箭“穿心”的效果。

該效果還可以通過添加鼠標點擊事件等進行進一步的改進，變得更加生動有趣。歡迎嘗試并分享你的創意。