效果展示
CSS 知识点
页面整体布局
html
复制代码
<div class="box">
<div class="circle"></div>
</div>
编写基础样式
css
复制代码
.box {
position: relative;
width: 400px;
height: 400px;
border: 80px solid transparent;
border-left: 80px solid #fff5;
border-bottom: 80px solid #fff5;
border-radius: 50%;
transform: rotate(-45deg);
}
.box::after {
content: "";
position: absolute;
top: -13px;
left: -34px;
width: 80px;
height: 40px;
background: #fff;
border-radius: 50%;
transform: rotate(45deg);
}
.box::before {
content: "";
position: absolute;
top: 214px;
right: -33px;
width: 80px;
height: 40px;
background: #fff;
border-radius: 50%;
transform: rotate(45deg);
}
编写小球样式
css
复制代码
.circle {
position: absolute;
top: 65px;
left: -65px;
width: 70px;
height: 70px;
background: #fff;
border-radius: 50%;
box-shadow: inset 0 5px 20px rgba(0, 0, 0, 0.5);
z-index: 10000;
transform-origin: 200px;
}
编写动画
css
复制代码
.box {
animation: animate 2s linear infinite;
}
/* 第三阶段 */
@keyframes animate {
0%,
100% {
transform: rotate(333deg);
}
50% {
transform: rotate(290deg);
}
}
.circle {
animation: animateBall 2s linear infinite;
}
@keyframes animateBall {
0%,
100% {
transform: rotate(45deg);
}
50% {
transform: rotate(225deg);
}
}
编写 JS 定时刷新背景
javascript
复制代码
function changeBg() {
let r = Math.floor(Math.random() * 255);
let g = Math.floor(Math.random() * 255);
let b = Math.floor(Math.random() * 255);
document.body.style.backgroundColor = `rgba(${r}, ${g}, ${b})`;
}
setInterval(() => {
changeBg();
}, 4000);
完整代码下载
完整代码下载
