CSS3是一項廣受歡迎的前端技術，它為網頁提供了豐富的樣式和效果。其中，繪制圖案是CSS3技術的一種重要應用，它可以為網頁注入生動的表現力。本文將介紹如何使用CSS3繪制暫停圖案。

.pause {
position: relative;
width: 100px;
height: 100px;
}
.pause:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background-color: #000;
}
.pause:after {
content: "";
position: absolute;
top: 0;
left: 60%;
width: 40%;
height: 100%;
background-color: #000;
}
.pause:hover:after {
left: 50%;
}
.pause:hover:before {
width: 50%;
}

以上是實現暫停圖案的CSS代碼，首先定義了一個類名為“.pause”的元素，并定位其為相對定位。然后，使用:before偽元素和:after偽元素分別在元素的左側和右側創建黑色背景，占據元素高度的40%和60%。

在:hover狀態下，暫停圖案發生了變化，使用CSS3的過渡效果使左側背景色寬度從40%逐漸變為50%。同時，右側背景色的left值也從60%逐漸變為50%。這種變化可以為用戶提供更直觀的反饋，增強用戶體驗。

總之，CSS3繪制暫停圖案是一種簡便實用的技術，它為網頁注入了更多的生動表現力，增強了用戶體驗。