<!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>
<style>
* {
padding: 0;
margin: 0;
}
body {
height: 600px;
display: flex;
justify-content: center;
align-items: center;
}
.wrap {
width: 400px;
height: 400px;
background-color: aqua;
position: relative;
}
.bottom {
position: absolute;
width: 200px;
height: 50px;
background-color: red;
left: 50%;
bottom: 50px;
transform: translate(-50%, 0);
overflow: hidden;
border-radius: 10px;
}
.bottom::after {
content: "";
width: 50px;
height: 50px;
position: absolute;
top: -25px;
left: 50%;
border-radius: 0 0 50% 50%;
transform: translate(-50%, 0);
background-color: blueviolet;
animation-name: radiusclose;
animation-duration: 2s;
}
@keyframes radiusclose {
0% {
height: 50px;
}
50% {
height: 0;
}
}
.ball {
position: absolute;
width: 40px;
height: 40px;
left: 50%;
bottom: 85px;
background-color: blue;
border-radius: 50%;
transform: translate(-50%, 0);
animation-name: ballup;
animation-duration: 2s;
z-index: 100;
}
@keyframes ballup {
0% {
transform: translate(-50%, 0);
width: 40px;
border-radius: 50%;
}
25% {
transform: translate(-50%, -40px);
border-radius: 50%;
}
29% {
transform: translate(-50%, -32px);
border-radius: 50%;
}
30% {
width: 40px;
}
32% {
width: 40px;
border-radius: 10px;
}
50% {
width: 200px;
transform: translate(-50%, -35px);
}
68% {
width: 40px;
border-radius: 10px;
}
70% {
width: 40px;
}
71% {
transform: translate(-50%, -32px);
border-radius: 50%;
}
75% {
transform: translate(-50%, -40px);
}
100% {
transform: translate(-50%, 0);
width: 40px;
border-radius: 50%;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="hello"></div>
<a id="ball" href="" class="ball"></a>
<div class="bottom"></div>
</div>
<script>
</script>
</body>
</html>
用js直接修改类名做出动画效果可能好点,a标签不停刷新页面产生动画不太可取,但只用html加css暂时还没有什么更好办法。