近几日学了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。
下拉找到这样的页面进行所示配置,保存之后就会显示预览网址。