CSS權威指南是一本非常經典的CSS技術書籍，其封面上的圖案也頗具特色。封面的圖案是一條水中自由游動的魚，形態逼真，生動有趣。

.fish {
width: 200px;
height: 100px;
background: #b2d6e8;
border-radius: 50% / 50%;
position: relative;
animation: swim 4s linear infinite;
}
.fish:before,
.fish:after {
content: '';
width: 30px;
height: 60px;
border-radius: 50% / 50%;
background: white;
position: absolute;
top: 20px;
left: 80px;
transform: rotate(-10deg);
}
.fish:after {
top: auto;
bottom: 20px;
transform: rotate(10deg);
}
.fish .eye {
width: 20px;
height: 20px;
border-radius: 50%;
background: black;
position: absolute;
top: 40px;
left: 90px;
}
.fish .eye:before {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
position: absolute;
top: 0;
left: 0;
}
@keyframes swim {
0% {
transform: translateX(-150px) translateY(-50px);
}
25% {
transform: translateX(0) translateY(-50px);
}
50% {
transform: translateX(150px) translateY(-50px);
}
75% {
transform: translateX(0) translateY(-50px);
}
100% {
transform: translateX(-150px) translateY(-50px);
}
}

這條魚的實現方法是通過利用CSS3的動畫與偽元素來實現的。魚的身體是通過圓形的div來實現，加上漸變的背景色，使其看起來像是一條魚。魚的眼睛是透過嵌套的兩個div來實現的，最終實現了一個逼真的魚的效果。魚身體的動畫是使用CSS3動畫的關鍵幀來實現的，使其看起來像是在水中游動。

封面的設計讓人聯想到CSS技術對于Web設計的重要性，也啟示了開發者在實現網站視覺效果方面的靈感。這本CSS權威指南的封面，無疑給CSS開發者提供了一種形象生動而又有趣的表現方法。