示例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#main {
width: 1000px;
height: 600px;
background-color: burlywood;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes up {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-100px);
}
}
@keyframes down {
0% {
transform: translateY(-100px);
}
100% {
transform: translateY(200px);
}
}
@keyframes left1 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-100px);
}
}
@keyframes left2 {
0% {
transform: translateX(-100px);
}
100% {
transform: translateX(-300px);
}
}
#icon {
width: 20px;
height: 20px;
border-radius: 20px;
background-color: cadetblue;
display: none;
}
.animation {
animation: up 0.5s ease-out, left2 0.5s linear 0.5s;
}
.animation1 {
animation: left1 0.5s linear, down 0.5s ease-in 0.5s;
}
</style>
<body>
<div id="main" onclick="wuhu()">
<div id="package">
<div id="icon"></div>
</div>
</div>
</body>
<script>
function wuhu() {
document.getElementById('icon').className = 'animation'
document.getElementById('package').className = 'animation1'
document.getElementById('icon').style.display = 'inline-block'
setTimeout(() => {
document.getElementById('icon').className = ''
document.getElementById('package').className = ''
document.getElementById('icon').style.display = 'none'
}, 1000)
}
</script>
</html>
示例二
实现思路:
创建一个小球Div ,
点击按钮,先将小球移到点击的地方
设置个定时器(可以重复点击)
向页面底部抛掷小球,css动画, 立方贝塞尔曲线
页面创建小球:
return (
<>
<div id="ball"></div>
</>
)
css:
#ball {
width: 15px;
height: 15px;
background: #f4ad52;
border-radius: 50%;
position: fixed;
transition: left 1s linear, top 1s ease-in;
z-index: 1;
}
功能逻辑代码实现:
// 点击按钮 抛掷小球
function dianji(evt) {
var $ball = document.getElementById('ball'); //获取小球的dom节点
// 将小球进行归位,移到点击的位置,
$ball.style.top = evt.pageY + 'px';
$ball.style.left = evt.pageX + 'px';
$ball.style.transition = 'left 0s, top 0s'; //动画
// 小球向下进行抛掷, 设置定时器可以重复点击
setTimeout(() => {
$ball.style.top = window.innerHeight + 'px';
$ball.style.bottom = "20px"
$ball.style.left = '10px';
//css动画 加上cubic-bezier(.35,.8,1,1) 立方贝塞尔曲线 底部有官网链接
$ball.style.transition = 'left 1s cubic-bezier(.35,.8,1,1), top 1s ease-in';
}, 20)
}