CSS繪畫動態圖標是一種很神奇的技術，它能夠通過CSS代碼來繪制出各種各樣的圖標和圖形，并且還能賦予它們不同的動態效果。下面我們就來看一看如何使用CSS繪制動態圖標。

.icon {
width: 50px;
height: 50px;
background: #ccc;
border-radius: 50%;
position: relative;
animation: rotate 2s linear infinite;
}
.icon::before,
.icon::after {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
position: absolute;
}
.icon::before {
left: 10px;
}
.icon::after {
right: 10px;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

上面的代碼是一個簡單的動態圖標，它是一個圓形，里面有兩個小球在旋轉。這個動態效果是通過CSS3的animation屬性和@keyframes規則來實現的。

在這個代碼中，我們首先定義了一個.icon類，它代表整個圖標，包括圖標的顏色、大小、形狀等基本屬性。然后，我們通過偽類::before和::after來實現兩個小球的效果。

在這個代碼中，我們還使用了border-radius屬性來實現圓形效果，同時通過position屬性來將小球放置在圓形圖標的兩側。

最后，我們使用了animation屬性來設置整個圖標的動態效果，使用@keyframes規則來定義動效的動畫過程，實現整個圖標的旋轉效果。

通過這種方式，我們可以使用CSS代碼來繪制出各種各樣的動態圖標和效果，非常的靈活和易于控制，具有很大的開發價值。