純css3實現旋轉的太極圖

時間 2020-04-12

標籤 css3 css 實現旋轉太極圖欄目 CSS 简体版

原文原文鏈接

效果圖

上代碼：

------------------------------------------------------------

<body>

<style>

body {

background-color: #aaa;

}

.div {

width: 400px;

height: 400px;

border-radius: 50%;

border: 1px solid #ddd;

background-image:

radial-gradient(50% 50% at 50% 25%, #000 10%, transparent 0),

radial-gradient(50% 50% at 50% 75%, #fff 10%, transparent 0),

radial-gradient(50% 50% at 50% 25%, #fff 50%, transparent 0), radial-gradient(50% 50% at 50% 75%, #000 50%, transparent 0),

linear-gradient(to left, #fff 50%, #000 50%);

animation: rotate 3s linear infinite;

}

@keyframes rotate {

from {

transform: rotate(0deg)

}

to {

transform: rotate(359deg)

}

</style>

</body>

剛剛開始在博客園寫正式文章，不少東西正在摸索，樣式問題後面再慢慢修改，0.0

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。