radious 활용하기

radious를 활용하여 목록 만들기

우선 하나의 div안에 세개의 span과 한개의 div를 작성해줍니다.(html로 만들기)

 <div class="square">
        <span></span>
        <span></span>
        <span></span>
        <div>
            <h2>글 작성 공간</h2>
            <p>
                로임 ipsum dolor, sit amet consectetur adipisicing elit. Dolore dolores dolorum quam optio placeat iusto autem fuga quaerat, sunt et! Ullam illum eveniet, excepturi commodi impedit voluptas facere iusto numquam!
            </p>
            <a href="#none">Read More</a>
        </div>
    </div>

그리고 해당 콘텐츠를 가운데로 몰기 위해

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

flex로 유연하게 위치를 조정해주고 

justify로 세로(lineheight과 비슷한 느낌)높이를 가운데로 조정합니다.

align-items로 가로 중간을 맞춰주고

vh : 전체 높이에 따라 비율 조절 (예를 들어브라우저 높이값이 900px일때 1vh는 9px이라는 뜻)

.square{
    width: 400px;
    height: 400px;
    position: relative;

}
.square span{
    position:absolute;
    width: inherit;
    height: inherit;
    border: 1px solid white;
    border-radius: 40% 60% 65% 35%/ 40% 45% 55% 60%;
    transition: 0.5s;
}

컨텐츠를 400px 400px로 만들어주고 안의 것들을 조정해주어야하기 때문에 position을 relative로 설정합니다.

 

이제 안에 있는 span을 꾸며보겠습니다.

감싸고 있는 부모요소와 호환되야함으로 position을 absolute로 지정해줍니다.(부모요소는 relative 자손요소는 absolute)

 

width와 height는 inherit으로 지정하여 부모요소의 조건들을 상속받습니다.(여기서 inherit의 의미를 유추하면 좋습니다)

그리고 여기서 가장 중요한 border-radious를 가지고 놀차례입니다.

 

원래의 형태는 border-radious : 왼위 오위 오아래 왼아래 순서로 지정할 수 있었는데 여기서는 특이하게도 /를 사용하여 한번도 꾸길 수 있습니다. 한번더 다듬어 주면서 조금 더 찌그러진 원형을 만들 수 있습니다. 

 

trasition은 색상이 변경되는 호버를 위해서 적용해 놓은 딜레이 비슷한 것입니다.

@keyframes circle {
    0%{
        transform: rotate(0);
    }   
    100%{
        transform: rotate(360deg);
    } 
}

@keyframes를 통해서 원하는 애니메이션의 과정에 영향을 줄 수 있습니다.

이따 나오겠지만 linear를 사용할 것이기때문에 0%에서 100%까지 점점 증가합니다. 이제 해당 %마다 어떤 효과가 어떻게 바뀌게될지 지정해야합니다. 원을 계속해서360도 돌려야하기 때문에 rotate를 0 에서 360deg로 적용시키면 0부터 360이 될때까지 모든 과정을 순서대로 보여줍니다.

.square:hover span{
    background-color: crimson;
    border: none;
}

.square span:nth-child(1){
    animation : circle 6s linear infinite;
}
.square span:nth-child(2){
    animation : circle 4s linear infinite;
    animation-direction: reverse;
}
.square span:nth-child(3){
    animation : circle 10s linear infinite;
}

.square:hover span:nth-child(1){
    opacity: 0.3;
}

.square:hover span:nth-child(2){
    opacity: 0.6;
}

.square:hover span:nth-child(3){
    opacity: 0.8;
}

이제 키프레임에 어떤 애니메이션을 적용시킬 것이고 세개의 스팬을 다른 시각에 돌게 만들기 위해서 스타일을 적용시켜야합니다.

.test {
  animation-name: testAnimation;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

위에 적용시키는 것들이 익숙해지면 아래 처럼도 사용가능합니다.

.test {  animation: testAnimation 4s 1s infinite linear alternate; }

이제 이것들을 응용해서 circle이라 지정된 keyframes를 6초의 delay를 주고 linear(시작부터 끝까지 동일한 속도의 애니메이션 지정)를 적용시켜 같은 속도로 진행되게 합니다. 그리고 이 과정을 무한 반복할 수 있게 infinite를 마지막에 써줍니다.

animation : circle 6s linear infinite reverse

각가의 span에 animation의 delay를 다르게 적용시켜서 각자 다른 시간에 시작되게 만들어 세개의 span이 다 시각적으로 보이게 만듭니다. :nth-child(1)을 사용합니다. 그리고 호버를 적용시켰을때에도 모든 span요소들이 다 각기 다른 opacity를 적용할 수 있게 코드를 작성합니다.

.square div{
    /* border:  1px solid red; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 70%;
    text-align: center;
    color: #fff;

}
.square div a {
    border-radius: 40% 60% 65% 35%/ 40% 45% 55% 60%;
    color: #fff;
    border: 1px solid white;
    padding: 8px;
    text-decoration: none;
}

마지막으로 div안에 작성했던 div에 텍스트를 작성하고 원안으로 짚어넣어 위치를 조정합니다.