js心动代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* 定义一个动画 */
@keyframes jump{
from{
transform: scale(0.5);
opacity: 0.5;
/* box-shadow: 6px 6px 10px rgb(234, 23, 23); */
}to{
transform: scale(2);
/* 透明度 1不透明 0.5半透明 */
opacity: 1;
/* box-shadow: 10px 10px 6px rgb(234, 23, 23); */
}
}
/* 定义一个iou旋转动画 */
@keyframes circles{
from{
transform: rotate(0deg);
z-index: 1;
}to{
transform: rotate(360deg);
z-index: -1;
}
}
.f{
width: 170px;
height: 160px;
/* border: 1px solid rebeccapurple; */
position: relative;
left: 200px;
top: 200px;
/* 给父元素绑定动画 */
/* animation: jump 1s ease alternate infinite; */
}
.m{
animation: jump 1s ease alternate infinite;
}
.f>div{
position: absolute;
}
.z1,.z2{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
.z2{
left: 70px;
}
.z3{
width: 100px;
height: 100px;
background-color: red;
left: 35px;
top: 35px;
transform: rotate(45deg);
}
.z4{
top: 50px;
left: 45px;
font-size: large;
color: aliceblue;
z-index: -1;
}
.z4c{
animation: circles 1s linear 2s infinite;
}
button{
width: 80px;
height: 40px;
background-color: rgb(39, 133, 39);
border: none;
color: white;
font-size: large;
border-radius: 10px;
/* 小手指鼠标 */
cursor: pointer;
/* 阴影 */
box-shadow: 0 8px 5px gray;
}
button:active{
transform: translate(5px,5px);
}
</style>
</head>
<body>
<button οnclick="start1()">开始</button>
<button οnclick="stop1()">停止</button>
<div id="divF" class="f">
<div class="z1"></div>
<div class="z2"></div>
<div class="z3"></div>
<div id="z4" class="z4">I  O  U</div>
</div>
</body>
<script>
let divF=document.getElementById('divF')
function start1(){
divF.className='f m'
z4.className='z4 z4c'
}
function stop1(){
divF.className='f'
z4.className='z4'
}
</script>
</html>
js动画
1、获取
2、定时器
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.f{
width: 500px;
height: 500px;
border: 1px solid rebeccapurple;
position: relative;
}
.z{
width: 100px;
height: 100px;
background-color: aquamarine;
position: absolute;
top:0;
}
</style>
</head>
<body>
<div class="f">
<div class="z" style="top: 0;"id="z"></div>
</div>
</body>
<script>
//获取
let z=document.getElementById('z')
// z.style.top='400px'
// z.style.left='400px'
let x=0,y=0
//定时器
let dsq=setInterval(()=>{
if(x>400||y>=400){
clearInterval(dsq)
}
x++,
y++
// console.log(x,y)
z.style.top=y+'px'
z.style.left=x+'px'
},10);
</script>
</html>
函数运动
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.f{
width: 500px;
height: 500px;
border: 1px solid rebeccapurple;
position: relative;
}
.z{
width: 100px;
height: 100px;
background-color: aquamarine;
position: absolute;
top:0;
}
</style>
</head>
<body>
<div class="f">
<div class="z" style="top: 0;"id="z"></div>
</div>
</body>
<script>
//获取
let z=document.getElementById('z')
// z.style.top='400px'
// z.style.left='400px'
let x=0,y=0,startY=200
//定时器
let dsq=setInterval(()=>{
if(x>=400){
clearInterval(dsq)
}
x++;
y=startY - Math.sin(x * 2 * Math.PI / 360)*200;
// console.log(x,y)
z.style.top=y+'px'
z.style.left=x+'px'
},10);
</script>
</html>
效果图
js圆周运动案例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.r1{
width: 500px;
height: 500px;
border: 1px solid red;
border-radius: 50%;
position: relative;
}
.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: rgb(17, 135, 220);
border-radius: 50%;
top: 200px;
left: 0px;
}
.b2{
width: 100px;
height: 100px;
background-color:#FFF8DC;
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 class="b1" id="b1"></div>
<div class="b2"></div>
<div class="r2"></div>
<div class="r3"></div>
</div>
<button οnclick="start1()">开始</button>
</body>
<script>
//r表示运动轨迹的半径，x0,y0表示圆心的坐标
let r=200,x0=250,y0=250;
//获取b1蓝色小球
let b1=document.getElementById('b1')
// b1.style.top=200+'px'
//定义x，y表示小球的运动轨迹坐标
let x=50,y=50
function start1(){
// 上半⚪
let sby=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(sby)
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)
//开启上半圆定时器
start1()//递归
}
})
}
},1)
}
</script>
</html>
效果展示：
