CSS天元突破是一種炫酷的前端效果，可以讓元素在頁面中飛來飛去，吸引用戶的注意力。

/* CSS代碼實現天元突破效果 */
#circle {
position: relative;
animation: move-circle 2s infinite ease-in-out;
}
@keyframes move-circle {
0% {
top: 0;
left: 0;
}
50% {
top: 200px;
left: 200px;
}
100% {
top: 0;
left: 0;
}
}

首先，我們需要一個包含天元的元素，以及該元素的基本樣式。這里我們使用了相對定位，為了讓它在移動軌跡上移動。

/* 基本樣式 */
#circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #f00;
}

接下來，我們需要使用關鍵幀（keyframes）定義動畫。在這個例子中，我們將元素移動到右下角，然后再回到原來的位置。

/* 關鍵幀 */
@keyframes move-circle {
0% {
top: 0;
left: 0;
}
50% {
top: 200px;
left: 200px;
}
100% {
top: 0;
left: 0;
}
}

最后，我們將動畫應用到元素上，并設置它無限循環。

/* 應用動畫 */
#circle {
position: relative;
animation: move-circle 2s infinite ease-in-out;
}

現在，我們已經實現了一個簡單的CSS天元突破效果。你可以嘗試用自己的樣式和動畫來創建更復雜的效果。