生日是每個人一年中最特殊、最令人期待的日子。為了讓生日更加特別，我們可以制作一些CSS動畫來裝飾頁面，讓我們的生日更加精彩。

html,body{
height:100%;
margin:0;
padding:0;
}
.container{
display:flex;
align-items:center;
justify-content:center;
height:100%;
}
.box{
position:relative;
width:200px;
height:200px;
border-radius:50%;
}
.box:before{
content:"";
position:absolute;
top:-5px;
right:-5px;
bottom:-5px;
left:-5px;
border:5px solid #f0f;
border-radius:50%;
}
.box:after{
content:"Happy Birthday!";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:24px;
font-weight:bold;
color:#f0f;
}
@keyframes animation{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
.box:hover{
animation:animation 1s linear infinite;
}

上述代碼實現了一個圓形盒子，盒子外圍有一個白色描邊，上面顯示“Happy Birthday!”。當鼠標移動到盒子上時，盒子將無限旋轉。

通過創意、巧妙的CSS動畫，可以讓我們的網頁更加有趣。如果你正在為生日準備網頁，就嘗試使用這個動畫效果吧！