html5+CSS3实现响应式旋转太极

      近几日学了B站的一个项目视频，做一下记录，视频原网址：https://www.bilibili.com/video/av60561206?p=2

先看一下效果图：

GitHub预览网址：https://arno1394.github.io/html5-c333-demo1/

CSDN下载地址：https://download.csdn.net/download/qq_38788897/12074225

俗话说得好，有钱出钱，没钱出力，想要源码又不介意花1积分的就点下载地址，不想就区GitHub直接拿。下面开始

       首先，我将实现步骤分为几步：

• 将一个圆形div对半分为黑白两部分

        /* 将父容器设置为相对定位，对绝对定位的子元素进行布局 */
        #taiji {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
        }

        /* 选取ID为taiji中第一个div子元素 */
        #taiji>div:first-child {
            width: 50%;
            height: 100%;
            background: black;
            position: absolute;
            left: 0;
        }
        
        /* 选取第二个div子元素 */
        #taiji>div:nth-child(2) {
            width: 50%;
            height: 100%;
            background: white;
            position: absolute;
            right: 0;
        }

• 在上半中间画一个黑色的半圆和在下面中间画一个白色半圆，形成太极中间S形效果

        #taiji>div:nth-child(3) {
            width: 200px;
            height: 200px;
            background: black;
            position: absolute;
            left: 25%;
            border-radius: 50%;
        }

        #taiji>div:nth-child(4) {
            width: 200px;
            height: 200px;
            background: white;
            position: absolute;
            left: 25%;
            bottom: 0;
            border-radius: 50%;
        }

 

• 在右上部分画一个白色小圆和左下部分画一个黑色小圆

        #taiji>div:nth-child(5) {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: white;
            position: absolute;
            left: 45%;
            top: 20%;
        }

        #taiji>div:nth-child(6) {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: black;
            position: absolute;
            left: 45%;
            bottom: 20%;
        }

 

• 添加阴影效果和动画效果，让太极图转起来

     /* 定义动画 旋转一圈 */
        @keyframes taiji {
            /* 开始时的未旋转 */
            from {
                transform: rotate(0);
            }

            /* 结束时旋转一圈 */
            to {
                transform: rotate(360deg);
            }
        }            

            
            /* 给#taiji添加动画 taiji 设置转一圈5S 并不断循环 转的速度是稳定的 */
            animation: taiji 5s infinite linear;
            /* 设置阴影效果 */
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);

• 实现响应式设计，以便在PC端和手机端分开浏览

        #taiji {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            /* 添加动画 taiji 设置转一圈5S 并不断循环 转的速度是稳定的 */
            animation: taiji 5s infinite linear;
            /* 设置阴影效果 */
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
        }
        /* 将任何用像素表示的缩小一半，百分比不用管 */
        @media (max-width: 500px) {
            #taiji {
                width: 200px;
                height: 200px;
            }
        }
        #八卦>div:nth-child(3) {
            background: black;
            position: absolute;
            width: 200px;
            height: 200px;
            left: 50%;
            margin-left: -100px;
            border-radius: 50%;
        }
        @media (max-width: 500px) {
            #taiji>div:nth-child(3) {
                width: 100px;
                height: 100px;
            }
        }

• 部署到Github

  考虑到可能部分不会用Git操作，以及上传项目简单，所以我采用的是直接了当的方式，没有采取命令行的模式。首先新建一个仓库。

接着新建一个index.html，将本地的代码直接复制过去，保存提交。然后点击下图的settings。

 

下拉找到这样的页面进行所示配置，保存之后就会显示预览网址。