我正在尝试在首次加载时为我的主页创建动画。我想要我必须从页面底部升起的球，但是一旦它到达中间，用户就可以单击它并扩展到整个页面。我有这里的升球代码：*, *::after, *::before {box-sizing: inherit;}html{ box-sizing: border-box;}body{ margin: 0; padding: 0; overflow: hidden;}.ball{ background-color: #eb8c28; width: 100px; height: 100px; border-radius: 0%; position: absolute; bottom: 0%; left: 50%; animation: rise; animation-duration: 2s; animation-iteration-count: 1; animation-fill-mode: forwards;}@keyframes rise{ 0%{ border-radius: 50%; } 100%{ border-radius: 50%; transform:translateY(-100%); } 75%{ border-radius: 40%; } 80%{ border-radius: 30%; } 90%{ border-radius:20%; } 100%{ transform: scale(20,20); }}<!DOCTYPE html><html> <head> <link rel="stylesheet" type="text/css" href="ballcopy.css"> <meta name="veiwport" content="width=device-width, initial-scale=1.0"> </head> <body> <main> <div class="ball"></div> </main> </body></html>但是，我坚持要如何将球缩放到整个页面。我应该创建另一个 div 并使其可点击，还是有办法创建一个可点击一半的动画以使用 JS 完成动画。
1 回答
翻过高山走不出你
TA贡献1875条经验 获得超3个赞
您可以使用 Javascript 向ball元素添加一个类（例如click），然后设置一个新动画，以便在设置该类后运行。它基本上将您的原始动画一分为二。
// Get the ball element
let ball = document.getElementsByClassName("ball");
// First instance of the ball object, add a click listener.
ball[0].addEventListener('click', (event) => {
// add the click class
ball[0].classList.add('click');
});
*,
*::after,
*::before {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.ball {
background-color: #eb8c28;
width: 100px;
height: 100px;
border-radius: 0;
position: absolute;
bottom: 0%;
/* Added calc here to center the ball */
left: calc(50% - 50px);
animation: rise;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.ball.click {
animation: fill;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes rise {
0% {
border-radius: 50%;
}
100% {
border-radius: 50%;
transform: translateY(-100%) scale(1);
}
}
@keyframes fill {
0% {
border-radius: 50%;
transform: translateY(-100%) scale(1);
}
100% {
border-radius: 0;
transform: translateY(-100%) scale(20);
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ballcopy.css">
<meta name="veiwport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<div class="ball"></div>
</main>
</body>
</html>
添加回答
举报
0/150
提交
取消