起始页动画
我正在尝试在首次加载时为我的主页创建动画。我想要我必须从页面底部升起的球，但是一旦它到达中间，用户就可以单击它并扩展到整个页面。我有这里的升球代码：
*, *::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回答
-
翻过高山走不出你
您可以使用 Javascript 向ball元素添加一个类（例如click），然后设置一个新动画，以便在设置该类后运行。它基本上将您的原始动画一分为二。// Get the ball elementlet 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>
随时随地看视频慕课网APP
相关分类
JavaScript