记易码

纯CSS制作的太极图

—

由

ly
于

完整的网页代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>旋转的太极</title>
  <style>
  /* 页面居中与背景 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 太极图 */
.taiji {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.75);
  background:
    radial-gradient(10% 10% at 75% 50%, #fff 50%, transparent 50%),
    radial-gradient(10% 10% at 25% 50%, #000 50%, transparent 50%),
    radial-gradient(50% 50% at 25% 50%, #fff 50%, transparent 50%),
    radial-gradient(50% 50% at 75% 50%, #000 50%, transparent 50%),
    linear-gradient(#fff 50%, #000 50%);
  
  animation: spin 5s linear infinite;
  animation-play-state: paused; /* 默认暂停 */
}

.taiji:hover {
  animation-play-state: running;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
  </style>
</head>
<body>
  <div class="taiji"></div>
</body>
</html>

评论

发表回复