CSS 实现丝滑动画

效果展示

CSS 知识点

  • animation 综合运用

页面整体布局

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);

完整代码下载

完整代码下载

相关推荐
天天向上102412 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y28 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁34 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry35 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录36 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟37 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan41 分钟前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
OpenTiny社区1 小时前
盘点字体性能优化方案
前端·javascript