/*走马灯代码实现*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.f{
width: 800px;
height: 100px;
border-top: 1px solid purple;
}
.f>div{
width: 80px;
height: 60px;
background-color: white;
border-radius: 50%;
float: left;
margin-left: 20px;
}
@keyframes changecolor {
0%{
background-color: cornflowerblue;
}20%{
background-color: pink;
}40%{
background-color: cyan;
}60%{
background-color: greenyellow;
}80%{
background-color: antiquewhite;
}100%{
background-color: coral;
}
}
.f>div:nth-child(1){
animation: changecolor 2s ease 0s infinite;
}
.f>div:nth-child(2){
animation: changecolor 2s ease 1s infinite;
}
.f>div:nth-child(3){
animation: changecolor 2s ease 2s infinite;
}
.f>div:nth-child(4){
animation: changecolor 2s ease 3s infinite;
}
.f>div:nth-child(5){
animation: changecolor 2s ease 4s infinite;
}
.f>div:nth-child(6){
animation: changecolor 2s ease 5s infinite;
}
.f>div:nth-child(6){
animation: changecolor 2s ease 6s infinite;
}
</style>
</head>
<body id="1">
<div class="f">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
<script>
let body=document.getElementById(1)
let s=``
for(
let i=0 ; i<10; i++
){
s+=`<div class="f">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>`
}
body.innerHTML=s
</script>
</html>
运动学习模板
/*简单方块运动(学习模板)*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.r1{
width: 500px;
height: 500px;
border: 1px solid skyblue;
border-radius: 50%;
position: relative;
}
.r1>div{
position: absolute;
}
.r2{
width: 300px;
height: 300px;
border-radius:50%;
border: 1px solid red;
top: 100px;
left: 100px;
}
.b1{
width: 100px;
height: 100px;
border-radius:50%;
border: 1px solid aqua;
top: 200px;
left: 0px;
}
.b2{
width: 100px;
height: 100px;
border-radius:50%;
border: 1px solid mediumslateblue;
top: 200px;
left: 100px;
}
.r3{
width: 100px;
height: 100px;
border-radius:50%;
border: 1px solid cornflowerblue;
top: 200px;
left: 200px;
}
</style>
<body>
<div class="r1">
<div id="b1" class="b1"></div>
<div class="b2"></div>
<div class="r2"></div>
<div class="r3"></div>
</div>
<button onclick="st1()">开始</button>
</body>
<script>
let r=200,x0=250,y0=250;
let b1=document.getElementById(`b1`)
// 定义x,y表示小球球心坐标
let x=50,y=50
function st1(){
// 上半圆
let sbr=setInterval(()=>{
x++
y=-Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
b1.style.top=y-50+`px`
b1.style.left=x-50+`px`
if (x==450&&y==250){
// alert(`右顶点`),取消上半
clearInterval(sbr)
// 下半
let xbr=setInterval(()=>{
x--
y=Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
b1.style.top=y-50+`px`
b1.style.left=x-50+`px`
// 左切点
if (x==50&&y==250){
clearInterval(xbr)
str1()
}
})
}
},10);
}
</script>
</html>
圆周运动
1.弧长方式
需要嵌入二次函数,分析定位与切点(较难)
/*圆周运动(弧长方式)*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.r1{
width: 500px;
height: 500px;
border: 1px solid skyblue;
border-radius: 50%;
position: relative;
}
.r1>div{
position: absolute;
}
.r2{
width: 300px;
height: 300px;
border-radius:50%;
border: 1px solid red;
top: 100px;
left: 100px;
}
.b1{
width: 100px;
height: 100px;
border-radius:50%;
border: 1px solid aqua;
top: 200px;
left: 0px;
}
.b2{
width: 100px;
height: 100px;
border-radius:50%;
border: 1px solid mediumslateblue;
top: 200px;
left: 100px;
}
.r3{
width: 100px;
height: 100px;
border-radius:50%;
border: 1px solid cornflowerblue;
top: 200px;
left: 200px;
}
</style>
<body>
<div class="r1">
<div id="b1" class="b1"></div>
<div class="b2"></div>
<div class="r2"></div>
<div class="r3"></div>
</div>
<button onclick="st1()">开始</button>
</body>
<script>
let r=200,x0=250,y0=250;
let b1=document.getElementById(`b1`)
// 定义x,y表示小球球心坐标
let x=50,y=50
function st1(){
// 上半圆
let sbr=setInterval(()=>{
x++
y=-Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
b1.style.top=y-50+`px`
b1.style.left=x-50+`px`
if (x==450&&y==250){
// alert(`右顶点`),取消上半
clearInterval(sbr)
// 下半
let xbr=setInterval(()=>{
x--
y=Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
b1.style.top=y-50+`px`
b1.style.left=x-50+`px`
// 左切点
if (x==50&&y==250){
clearInterval(xbr)
str1()
}
})
}
},10);
}
</script>
</html>
/*最外圈的圆做圆周运动*/
2.角度方式
嵌入三角函数
/*角度方式*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆周运动2</title>
<style>
.r1{
width: 500px;
height: 500px;
border: 1px solid red;
border-radius: 50%;
}
.r1>div{
position: absolute;
}
.r2{
width: 300px;
height: 300px;
border: 1px solid green;
border-radius: 50%;
top: 100px;
left: 100px;
}
.b1{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
top: 200px;
left: 0px;
}
.b2{
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
top: 200px;
left: 100px;
}
.r3{
width: 100px;
height: 100px;
border: 1px solid blue;
border-radius: 50%;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div class="r1">
<div id="b1" class="b1"></div>
<div id="b2" class="b2"></div>
<div class="r2"></div>
<div class="r3"></div>
</div>
<button onclick="start1(),start2()">开始</button>
</body>
<script>
let r1=200,x0=250,y0=250,r2=100;
let b1=document.getElementById('b1')
let b2=document.getElementById('b2')
let x=0,y=0;
function start1(){
setInterval(() =>{
x++
radian= x*Math.PI/180;
b1.style.top=y0-50+r1*Math.sin(radian)+'px'
b1.style.left=x0-50+r1*Math.cos(radian)+'px'
},20)
}
function start2(){
setInterval(() =>{
y++
radian= x*Math.PI/180;
b2.style.top=y0-50+r2*Math.sin(radian)+'px'
b2.style.left=x0-50+r2*Math.cos(radian)+'px'
},20)
}
</script>
</html>