CSS 实现丝滑动画
2023-12-14 21:06:39
效果展示
CSS 知识点
- animation 综合运用
页面整体布局
<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);
完整代码下载
文章来源:https://blog.csdn.net/qq_33003143/article/details/134914274
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!