CSS3是一種非常有用的技術(shù)，這里有幾個(gè)冷門(mén)的工作例子。

/* 1. HTML5視頻控制樣式 */
video::-webkit-media-controls {
display: flex;
justify-content: space-between;
background-color: transparent;
color: white;
}
video::-webkit-media-controls-play-button {
background-color: transparent;
border: none;
}
video::-webkit-media-controls-timeline {
height: 5px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 2.5px;
}
video::-webkit-media-controls-current-time-display {
color: white;
margin-right: 10px;
}
video::-webkit-media-controls-time-remaining-display {
color: white;
margin-left: 10px;
}

這段代碼以webkit為基礎(chǔ)，使用CSS3來(lái)控制HTML5視頻的控制樣式。它允許你自定義各種視頻控件，是視頻網(wǎng)站開(kāi)發(fā)者的利器。

/* 2. 圓形圖片 */
.circle-image {
border-radius: 50%;
overflow: hidden;
}
.circle-image img {
display: block;
width: 100%;
height: auto;
}

這段代碼創(chuàng)建的CSS3圓形圖片可以用于創(chuàng)建圓形頭像或圖標(biāo)。只需要將圖片放置在.circle-image的div內(nèi)嵌的img標(biāo)簽中，就可以輕松實(shí)現(xiàn)圓形圖片效果。

/* 3. 條紋背景 */
.stripe-background {
background-size: 200% 100%;
background-image: linear-gradient(-45deg, rgba(255,255,255,.2) 25%, transparent 25%, transparent 50%,
rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%, transparent 75%, transparent);
animation: animateStripe 1s linear infinite;
}
@keyframes animateStripe {
0% {
background-position: 0 0;
}
100% {
background-position: 200% 0;
}
}

這段代碼創(chuàng)建了一個(gè)動(dòng)畫(huà)的條紋背景。它使用CSS3 linear-gradient屬性實(shí)現(xiàn)條紋效果，并使用CSS3動(dòng)畫(huà)實(shí)現(xiàn)無(wú)限滾動(dòng)動(dòng)畫(huà)效果。這種效果可以用于做網(wǎng)頁(yè)背景。

/* 4. 圖片懸浮時(shí)浮現(xiàn) */
.hover-float {
position: relative;
}
.hover-float::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.hover-float:hover::before {
opacity: 1;
}

這段代碼在圖片懸浮時(shí)給圖片添加浮現(xiàn)效果。它使用了CSS3的::before偽元素和opacity屬性實(shí)現(xiàn)漸變效果，是一種常用的圖片效果。