인프런 커뮤니티 질문&답변
작성한 질문수
실전 퍼블리싱 03(더블 보더 레디우스 애니메이션)
작성
·
235
1
실전 퍼블리싱 03(더블 보더 레디우스 애니메이션)을 진행하고 있습니다. 마우스를 올릴 때 원 색상이 변하는 부분에서 span(원)을 둘러싼 div 박스에 마우스를 대어야 색상이 변하고 span(원)에 마우스를 갖다대면 색상이 변하지 않습니다.. 어디가 문제인지 알 수 있을까요.
<body>
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
body {
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
position: relative;
border: 2px solid red;
width: 400px;
height: 400px;
}
.box span {
position: absolute;
border: 1px solid white;
/* inherit : 부모요소와 자식요소 크기를 동일하게(100%) */
width: inherit;
height: inherit;
/* border-radius를 '/'로 중첩해서 사용하면 다양한 도형을 나타낼 수 있다. */
border-radius: 40% 60% 65% 35% / 40% 45% 55% 60%;
/* 마우스로 클릭시 효과가 */
transition: 0.5s;
animation: ani 7s linear infinite;
}
.box:hover span {
background-color: crimson;
}
.box span:nth-child(1) {
}
.box span:nth-child(2) {
/* animation-direction : reverse = 역방향 */
animation-direction: reverse;
animation-delay: 0.5s;
}
.box span:nth-child(3) {
animation-delay: 0.8s;
}
@keyframes ani {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
div {
position: absolute;
}
답변 1
0
코딩웍스(Coding Works)
지식공유자
매우 정상적으로 잘 되는데요. 무슨 문제인지 모르겠네요.
마우스를 올릴 때 원 색상이 변하는 부분에서 span(원)을 둘러싼 div 박스에 마우스를 대어야 색상이 변하고... 라고 하셨는데 이건 아래처럼 주셔서 그렇습니다. 이렇게 주시는게 맞습니다.
span(원)에 마우스를 갖다대면 색상이 변하게 하실 필요 없습니다. 아래처럼 하시면 .box에 마우스 올라가면 span의 색상이 변경됩니다.
.box:hover span {
background-color: crimson;
}