CSS萬花筒，一種妙趣橫生的CSS技術，可以讓你在網頁上呈現出各種美妙的圖案和效果，其中包括了膾炙人口的“寫輪眼”效果。

.kaleidoscope {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
border-radius: 50%;
}
.kaleidoscope:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform: translateX(-50%);
background-image: url('kaleidoscope.jpg');
background-size: cover;
filter: blur(5px);
}
.kaleidoscope:after {
content: "";
width: 200%;
height: 200%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: inherit;
background-size: cover;
transform-origin: center;
animation: kaleidoscope 5s infinite linear;
}
@keyframes kaleidoscope {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

通過使用CSS的偽元素和變換技術，我們可以輕松地實現出一個萬花筒樣式的盒子，而加上相應的動畫效果后，便實現了寫輪眼的效果。

以上代碼中，我們主要通過一個名為“kaleidoscope”的class來定義我們的樣式，其中包括了設置寬高、定位和邊框等屬性。我們通過:before偽元素來實現一個模糊的底圖，然后通過:after偽元素來克隆這個底圖，在盒子中心旋轉展示。而動畫效果則是通過使用@keyframes關鍵字來定義的。

最終，我們就可以在網頁中展示一個華麗的寫輪眼樣式，讓人贊嘆不已。