更漂亮的CSS樣式代碼能夠增強你的網站的美觀度和用戶體驗。以下是一些我認為非常好看的CSS樣式代碼。

/* 創建一個立方體 */
.cube {
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(45deg);
}
.cube .side {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
}
.cube .front  { background-color: red;    transform: translateZ(100px); }
.cube .back   { background-color: blue;   transform: rotateY(180deg) translateZ(100px); }
.cube .left   { background-color: green;  transform: rotateY(-90deg) translateZ(100px); }
.cube .right  { background-color: yellow; transform: rotateY(90deg) translateZ(100px); }
.cube .top    { background-color: orange; transform: rotateX(-90deg) translateZ(100px); }
.cube .bottom { background-color: purple; transform: rotateX(90deg) translateZ(100px); }

上面的CSS代碼會創建一個立方體，其中每個側面的顏色不同。更重要的是，它使用了大量的3D變換，使整個立方體看起來非常棒。

/* 創建一個簡單的按鈕 */
.button {
display: inline-block;
padding: 10px;
font-size: 16px;
font-weight: bold;
border-radius: 5px;
background-color: #5cb85c;
color: white;
text-decoration: none;
box-shadow: 0px 3px 0px #3d8b3d;
}
.button:hover {
background-color: #449d44;
box-shadow: 0px 3px 0px #398439;
}

這些CSS樣式代碼會幫助創建一個簡單的、美麗的按鈕，具有自然的鼠標懸停效果。你可以用這個按鈕來改善你網站中潛在的任何C?TA（Call to Action）操作。

/* 創建一個全屏背景圖 */
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -1;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

最后，這些CSS樣式代碼可以幫助你創建一個帶有全屏背景視頻的網站。令人愉快的是，這個特效有助于呈現出令人耳目一新的、令人難以忘懷的視覺體驗。