<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="anime.min.js"></script>
<style>
.div1{
width: 20px;
height: 20px;
background:yellowgreen;
margin-top:5px;
font-size: 14px;
transform: rotate(30deg)
}
.py{
color:#FF8F42;
}
</style>
</head>
<body>
<div class="div1">
啦啦啦
</div>
<div class="div1">
</div>
<div class="div1">
</div>
<div class="div1">
</div>
<input type="number" value="1000" id="input">
<svg width="128" height="128" viewBox="0 0 128 128">
<polygon class="py" points='64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100'>
</polygon>
</svg>
<script>
const divs=document.querySelectorAll('.div1')
anime({
targets:".div1",
duration:1000,
// 动画的持续时间，以毫秒为单位
// delay:10000,
// 动画的延迟执行时间
// endDelay:0,
// 这个参数目前还不知道是什么功能
easing:"linear",
// 定义动画的缓动函数
round:10,
// 变化的值的进制取法，默认是0，现在是取10进制
// 1.具体的属性参数：使用object作为值动画。为每个属性定义特定参数，未在object定义的其他属性将从主动画继承
// translateX:{
// value:200,
// duration:800,
// },
// translateY:{
// value:400,
// duration:10000,
// }
// 2.基于功能的参数
translateX:270,
delay(el,i,l){
// el:传进来的元素
// i:动画目标元素的索引
// l:动画目标的总数
return i*100
},
endDelay(el, i, l) {
return (l - i) * 100;
}
})
</script>
</body>
</html>
