CSS3半圓移動是一種很酷的效果,可以讓網頁更加動態有趣。下面介紹如何實現半圓移動效果:
/* HTML代碼 */ <div class="circle"></div> /* CSS代碼 */ .circle { width: 50px; height: 100px; border-radius: 50px 50px 0 0; background-color: red; position: relative; animation: move 2s infinite; } @keyframes move { 0% { left: 0; } 50% { left: 50%; } 100% { left: 0; } }
代碼中,首先創建一個div元素作為半圓,設置寬高以及圓角屬性,然后在CSS中設置定位和動畫。動畫使用@keyframes關鍵字創建,定義從0%到100%的動畫效果,每50%的時間,向右移動50%的距離,實現來回移動的效果。最后將動畫應用到元素中,設置無限循環。
以上就是CSS3半圓移動的實現方式,可以借此增加網頁的動感,吸引用戶的注意力。需要注意的是,不同瀏覽器對CSS3的支持有所不同,需要加上瀏覽器前綴以兼容不同瀏覽器。