HTML/CSS를 이용한 블로잉 스퀘어 애니메이션
라이브 링크: https://youtu.be/DnoP5v_PMrE
HTML 코드
<div class="container">
<ul class="square">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS 코드
.square {
position: absolute;
top: 0;
left: 0;
width: 100%;
list-style-type: none;
height: 100%;
overflow: hidden;
padding-left: 0;
margin-bottom: 0;
}
.square li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: red;
animation: moving 25s linear infinite;
bottom: -150px;
}
.square li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.square li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.square li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.square li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 4s;
animation-duration: 18s;
}
.square li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 2s;
}
.square li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.square li:nth-child(7) {
left: 35%;
width: 100px;
height: 100px;
animation-delay: 10s;
animation-duration: 25s;
}
.square li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.square li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.square li:nth-child(10) {
left: 10%;
width: 10px;
height: 10px;
animation-delay: 0s;
animation-duration: 15s;
}
@keyframes moving {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
그게 다야. 네가 좋아하길 바래
좋아요, 댓글, 팔로우 :)
감사합니다
Reference
이 문제에 관하여(HTML/CSS를 이용한 블로잉 스퀘어 애니메이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/uidesign09/blowing-square-animation-using-htmlcss-32em텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)