Css圓形跑馬燈是一種常見的網頁設計元素，可以用來展示新聞、廣告、熱點話題等內容。下面我們來逐步學習如何使用CSS創建圓形跑馬燈。

/*html代碼*/
<div class="carousel">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

首先，我們需要創建一個包含ul列表的div容器，并為其設置相應的樣式，使其成為圓形。

/*css代碼*/
.carousel {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #F5F5F5;
overflow: hidden;
position: relative;
}
.carousel ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
width: 300%;
}
.carousel li {
display: inline-block;
width: 33.33%;
text-align: center;
color: #fff;
font-size: 40px;
}

通過border-radius屬性設置div容器成為圓形。接著，我們將ul設置為flex布局，并通過width屬性的值為300%來讓ul中的li依次排列至容器的水平中間位置。

接下來，我們需要定義CSS動畫效果，實現li在容器內循環滾動的效果。我們可以通過CSS動畫中的@keyframes和animation兩個關鍵詞來實現：

/*CSS動畫效果代碼*/
.carousel ul {
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% {
transform: translate3d(0, 0, 0);  /*translate3d()方法是一個CSS3中的新特性，用于控制元素在3D空間中的位置*/
}
100% {
transform: translate3d(-200%, 0, 0); /*通過translate3d()方法中的第一個參數來控制元素的位置*/
}
}

最后，我們可以通過JavaScript來實現控制跑馬燈滾動的暫停和繼續功能：

/*JavaScript代碼*/
var carousel = document.querySelector('.carousel');
var isPaused = false;
function pauseResumeCarousel() {
var ul = carousel.querySelector('ul');
if (isPaused) {
ul.style.animationPlayState = 'running';
isPaused = false;
} else {
ul.style.animationPlayState = 'paused';
isPaused = true;
}
}
carousel.addEventListener('click', pauseResumeCarousel);

以上代碼通過addEventListener()方法為容器添加了一個鼠標點擊事件，用于控制跑馬燈的暫停和繼續。

通過以上步驟，我們就可以完成一個簡單的CSS圓形跑馬燈的制作了。希望本文對大家有所幫助。