Problem Solving
[CSS] Requirements Q12, Q13: Ball
Isaac S. Lee
2023. 10. 11. 18:19
📌Requirements Q12
<!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>
<style>
#list {
border: 1px solid black;
width: 1400px;
height: 750px;
position: relative;
left: 0px;
top: 0px;
}
#list .line {
height: 149px;
border-bottom: 1px solid black;
}
#list .line:last-child {
border-bottom: 0px;
}
#list .ball {
border: 1px solid black;
border-radius: 50%;
width: 100px;
height: 100px;
position: absolute;
text-align: center;
font-size: 4.4em;
font-weight: bold;
transition: all 5s;
}
#list .ball:nth-child(1) {
background-color: tomato;
left: 0px;
top: 47px;
transition-duration: 7s;
}
#list .ball:nth-child(2) {
background-color: gold;
left: 0px;
top: 197px;
transition-duration: 4s;
}
#list .ball:nth-child(3) {
background-color: orange;
left: 0px;
top: 347px;
}
#list .ball:nth-child(4) {
background-color: greenyellow;
left: 0px;
top: 497px;
transition-duration: 8s;
}
#list .ball:nth-child(5) {
background-color: cornflowerblue;
left: 0px;
top: 647px;
transition-duration: 4.5s;
}
#list:hover > .ball {
left: 1298px;
transform: rotate(3600deg);
}
</style>
</head>
<body>
<div style="width: 1400px; margin: 20px auto;">
<div id="list">
<div class="ball">A</div>
<div class="ball">B</div>
<div class="ball">C</div>
<div class="ball">D</div>
<div class="ball">E</div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</body>
</html>
📌Requirements Q13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box {
border: 10px solid black;
width: 650px;
height: 800px;
}
.ball {
border: 10px solid black;
width: 50px;
height: 50px;
border-radius: 50%;
float: left;
margin-left: 20px;
animation-name: keyBall;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes keyBall {
from { transform: translate(0px, 0px); }
to { transform: translate(0px, 730px); }
}
#ball1 {
background-color: red;
animation-duration: 1s;
}
#ball2 {
background-color: orange;
animation-duration: .5s;
}
#ball3 {
background-color: yellow;
animation-duration: .7s;
}
#ball4 {
background-color: green;
animation-duration: .9s;
}
#ball5 {
background-color: blue;
animation-duration: .76s;
}
#ball6 {
background-color: indigo;
animation-duration: 1.1s;
}
#ball7 {
background-color: violet;
animation-duration: .9s;
}
</style>
</head>
<body>
<div style="width: 650px; margin: 30px;">
<div id="box">
<div id="ball1" class="ball"></div>
<div id="ball2" class="ball"></div>
<div id="ball3" class="ball"></div>
<div id="ball4" class="ball"></div>
<div id="ball5" class="ball"></div>
<div id="ball6" class="ball"></div>
<div id="ball7" class="ball"></div>
</div>
</div>
</body>
</html>