CSS環形動畫演示是一種非常有趣的動畫效果，可以為網頁增添一些活力。想要實現這個效果，首先需要用到HTML標簽和CSS樣式。

HTML代碼：
CSS代碼：
.wrapper {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #fff;
overflow: hidden;
}
.circle {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-image: linear-gradient(90deg, red, yellow);
transform: rotate(0deg);
transition: transform 0.5s ease;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
top: 0;
left: 0;
}
.circle:hover {
transform: rotate(180deg);
}

上面的HTML代碼使用了一個外層容器(wrapper)來包含兩個子元素(circle和mask)。circle用于產生環形動畫效果，mask用于遮蓋circle以實現圓形布局。

在CSS樣式中，設置了wrapper的寬度、高度、圓角半徑、背景色和overflow屬性。circle和mask都采用了絕對定位(position: absolute)，且它們的圓角半徑都設為50%實現圓形效果。circle使用了漸變背景色來讓環形具有多彩的顏色。transform: rotate(0deg)將circle旋轉0度，transition: transform 0.5s ease表示旋轉動畫的過渡效果。

最后，為了實現鼠標懸停效果，使用了CSS偽類:hover，當鼠標懸停在circle上時，將形狀旋轉180度，即形成了環形動畫的效果。