用Css+Div实现太极图自动旋转

最新推荐文章于 2023-11-09 22:42:53 发布

xiaoyaGrace

最新推荐文章于 2023-11-09 22:42:53 发布

阅读量150

点赞数

本文链接：https://blog.csdn.net/xiaoyaGrace/article/details/106231108

版权

源代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>太极</title>
      <style type="text/css">
         body{margin: 0;
               padding: 0;
            background-color: rgb(121, 127, 133);
            }
         .taichi{height: 400px;
                  width: 400px;
                  border-radius: 50%;
                  margin: 80px auto;
                  background-color:rgb(211, 65, 65);
                  background: linear-gradient(to right,#000 50%,#fff 50%);
                  animation: spin 0.8s linear infinite;/*动画设置*/
         }
外汇赠金活动http://www.fx61.com/activities
         div>p{height: 200px;
               width: 200px;
               border-radius: 50%;
               margin-left: 100px;
               border-color: magenta;

         }
         .top{background-image: radial-gradient(#fff 25%,#000 25%);
         }
         .bottom{background-image: radial-gradient(#000 25%,#fff 25%);
                  margin-top:-16px;
         }
         .taichi:hover{transform: rotate(360deg) ;transition:2s;

         }
         /*动画方法*/
         @keyframes spin
      {
      0%
         {
         transform:rotate(0deg);
         }
      100% {
         transform:rotate(360deg);
         }
      }
      </style>
</head>
<body>
   <div class="taichi">
      <p class="top"></p>
      <p class="bottom"></p>
   </div>

</body>
</html>