TIL(퍼블리싱) -8

publishing

border 애니메이션 - 더블 보더 써클

• width : 100% 나 width : inherit으로 하나 동일하다
• border-radius: 40% 60% 65% 35% / 40% 45% 55% 60% 이런식으로 border-radius는 중첩해서 사용할 수 있다.
• trasform 속성중 rotate를 사용하면 돌리는 애니메이션을 할 수 있다. transform: rotate(360deg); 입력시 360도 돌리기
• animation-derection:reverse; 입력시 애니메이션 효과를 반대로 적용 가능

const Border1 = () => {
  return (
    <div className={styles.squareBox}>
      <div className={styles.square}>
        <span />
        <span />
        <span />
        <div>
            <h2>Heading Text</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem placeat praesentium autem facilis aliquam animi voluptatem necessitatibus, voluptate tempora officiis.
            </p>
            <a href="#none">Read More</a>
        </div>
      </div>
    </div>
  );
};

export default Border1;

.squareBox {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.square {
  width: 400px;
  height: 400px;
  position: relative;
}

.square span {
  position: absolute;
  width: inherit;
  height: inherit;
  border: 1px solid #fff;
  border-radius: 40% 60% 65% 35% / 40% 45% 55% 60%;
  transition: 0.8s;
  animation: circle 5s linear infinite;
}

.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;
}

.square div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 70%;
    text-align: center;
    color: #fff;
}
.square div a {
    padding: 8px;
    color: white;
    border: 1px solid white;
    border-radius: 40% 60% 65% 35% / 40% 45% 55% 60%;
}

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