HTML 및 CSS를 사용하여 상자에서 Fluid Animation 만들기
<div class="box"></div>
CSS
:root {
--bg-grey: #eee;
--bg-dark: #303032;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
body {
display: grid;
place-content: center;
background-color: #fff;
}
.box {
width: 10rem;
height: 10rem;
border: 2px solid var(--bg-dark);
background-color: var(--bg-dark);
position: relative;
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/53/Google_\"G\"_Logo.svg");
background-size: cover;
background-position: 100%;
}
.box::after {
content: '';
position: absolute;
bottom: -50%;
left: -50%;
border-radius: 45%;
width: 180%;
height: 180%;
background-color: var(--bg-grey);
animation: spin 4s ease-in-out infinite;
}
@keyframes spin {
from {
transform: translateY(0) rotate(0);
}
to {
transform: translateY(-100%) rotate(500deg);
}
}
결과
Reference
이 문제에 관하여(HTML 및 CSS를 사용하여 상자에서 Fluid Animation 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/flyingduck92/creating-fluid-animation-in-the-box-egp텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)