动画
@keyframes
是用来定义动画 不能直接运行 需要animation
来执行动画
<style>
@keyframes zoom{ //zoom是名字 这是一个缩放的动画
from{ //from是开始的样子 to是之后的样子 是从什么样子变到什么样子
transform: scale(0.5);
}to{
transform: scale(2);
}
}
@keyframes chroma{ //这是一个不停变换颜色的动画
0%{ //另一种写法可以设置更多的样子
background-color: red;
}20%{
background-color: yellow;
}40%{
background-color: greenyellow;
}60%{
background-color: rebeccapurple;
}80%{
background-color: aqua;
}100%{
background-color: pink;
}
}
</style>
定义完后借助animation
来运行
animation: name duration timing-function delay iteration-count direction fill-mode;
name
: 指定动画名称duration
: 动画多少秒完成这个动画timing-function
: 如何完成这个动画 默认ease(平滑过渡) ease-in(慢到快) ease-out(快到慢)delay
: 延迟多少秒开始运行动画interation-count
: 运行播放次数 infinte(无限次)direction
: 是否往返播放一次 默认播放完重头播放 alternate(正常与反向交替)fill-mode
: 动画结束之后保持什么样子
用js相对定位让图形绕圆运动
首先圆的标准方程是:(x-a)²+(y-b)²=r²
r:是圆的半径
a: 是圆心点坐标x
b:是圆心点的坐标y
转换一下://y=√ ̄r^2-(x-a)^2 ̄+b
<script>
// r表示运动轨迹的半径,x0,y0表示圆心的坐标
let r=200,x0=250,y0=250;
// 获取b1蓝色小球
let b2 = document.getElementById('b2')
// 定义x,y表示小球的轨迹坐标
let x=50,y=50
function start1(){
// 上半圆
sby=setInterval(() => {
x++ //y=√ ̄r^2-(x-x0)^2 ̄+y0
y=-Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
console.log(x,y)
b2.style.top=y- 50 +'px'
b2.style.left=x- 50 +'px'
if(x==450&&y==250){
//结束上半圆
clearInterval(sby)
let xby=setInterval(() => {
x--
y=Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
console.log(x,y)
b2.style.top=y-50 +'px'
b2.style.left=x-50 +'px'
if(x==50&&y==250){
//结束下半圆
clearInterval(xby)
// 递归
start1()
}
}, 10);
}
}, 10);
}
</script>
html代码
<div class="r1"> //第一条线
<div class="b1" id="b1"></div> //圆圈1
<div class="b2" id="b2"></div> //圆圈2
<div class="r2"></div> //第二条线
<div class="r3"></div> //第三条线
</div>
<button onclick="start1()">开始1</button>
<button onclick="start2()">开始2</button>
css代码
<style>
*{
margin: 0;
padding: 0;
}
.r1{
width: 500px;
height: 500px;
border: 1px solid red;
border-radius: 50%;
}
.r1>div{
position: absolute;
}
.r2{
width: 300px;
height: 300px;
border-radius: 50%;
border: 1px solid green;
top: 100px;
left: 100px;
}
.r3{
width: 100px;
height: 100px;
border: 1px solid blue;
border-radius: 50%;
top: 200px;
left: 200px;
}
.b1{
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
top: 200px;![在这里插入图片描述](https://img1.imgtp.com/2023/07/05/89bGBe1n.gif#pic_center)
left: 100px;
}
.b2{
width: 100px;
height: 100px;
background-color: rgb(101, 255, 90);
border-radius: 50%;
top: 200px;
left: 0px;
}
</style>