效果展示
CSS 知识点
页面整体布局
< div class = " box" >
< div class = " circle" > </ div>
</ div>
编写基础样式
.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) ;
}
编写小球样式
.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;
}
编写动画
.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 定时刷新背景
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 ) ;
完整代码下载
完整代码下载