search

博客列表 >使用css制作太极图

使用css制作太极图

南旭
南旭原创
2022年05月10日 14:47:52645浏览

效果查看

静态效果

动态效果

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>太极图</title>
  6.         <style>
  7.             .dayuan{
  8.                 position: absolute;
  9.                 border: 1px solid #000000;
  10.                 width: 400px;
  11.                 height:400px;
  12.                 align-items: center;
  13.                 border-radius:50%;
  14.                 background:linear-gradient(to bottom,#000000 0%,#000000 50%,#FFFFFF 51%,#FFFFFF 100%);
  15.                 animation: dayuan 8s linear infinite;
  16.             }
  18.             @keyframes dayuan{
  19.                 0%{
  20.                     transform: rotate(0deg);
  21.                 }
  22.                 100%{
  23.                     transform: rotate(-360deg);
  24.                 }
  25.             }
  26.             .xiao1{
  27.                 position: relative;
  28.                 width: 200px;
  29.                 height:200px;
  30.                 border-radius: 50%;
  31.                 margin-top: 25%;
  32.                 background-color: #FFFFFF;
  33.             }
  34.             .xiao2{
  35.                 position: relative;
  36.                 width: 200px;
  37.                 height:200px;
  38.                 border-radius:50%;
  39.                 margin-top: -50%;
  40.                 margin-left: 50%;
  41.                 background-color: black;
  42.             }
  43.             .xin1{
  44.                 position: relative;
  45.                 width: 50px;
  46.                 height: 50px;
  47.                 border-radius: 50%;
  48.                 margin-top: -30%;
  49.                 margin-left: 75px;
  50.                 background-color: black;
  51.             }
  52.             .xin2{
  53.                 position: relative;
  54.                 width: 50px;
  55.                 height: 50px;
  56.                 border-radius: 50%;
  57.                 margin-top: -50px;
  58.                 margin-left: 280px;
  59.                 background-color: #FFFFFF;
  60.             }
  61.         </style>
  62. </head>
  63. <body>
  64.     <div class="dayuan">
  65.         <div class="xiao1"></div>
  66.         <div class="xiao2"></div>
  67.         <div class="xin1"></div>
  68.         <div class="xin2"></div>
  69.     </div>
  71. </body>
  72. </html>
上一条：apollo 6.0 【开发版】从安装到启动，保姆级全教程下一条：网页生成图片，转PDF
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议