Magic inspired Social Share Button
-- https://codepen.io/codingstella/pen/gOQqaWo

https://codepen.io/codingstella/pen/gOQqaWo

https://codepen.io/codingstella/

<script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-ae5cde2e-fb64-f510-42d5-4efea99ca66b" crossorigin=""></script>

<div class="menu">
  <div class="toggle">
    <ion-icon name="share-social"></ion-icon>
    </div>
  
      <li style="--i:0;--clr:#1877f2">
      <a href="#"><ion-icon name="logo-facebook"></ion-icon></a>
    </li>
    <li style="--i:1;--clr:#25d366">
      <a href="#"><ion-icon name="logo-whatsapp"></ion-icon></a>
    </li>
    <li style="--i:2;--clr:#1da1f2">
      <a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
    </li>
     <li style="--i:3;--clr:#FF5733">
      <a href="#"><ion-icon name="logo-reddit"></ion-icon></a>
    </li>
    <li style="--i:4;--clr:#0a66c2">
      <a href="#"><ion-icon name="logo-linkedin"></ion-icon></a>
    </li>
    <li style="--i:5;--clr:#c32aa3">
      <a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
    </li>
    <li style="--i:6;--clr:#1b1e21">
      <a href="#"><ion-icon name="logo-github"></ion-icon></a>
    </li>
    <li style="--i:7;--clr:#ff0000">
      <a href="#"><ion-icon name="logo-youtube"></ion-icon></a>
    </li>
</div>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background: #262433;
}
.menu{
  position:relative;
 width:280px;
  height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.menu .toggle{
  position:relative;
  height:60px;
  width:60px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 3px 4px rgba(0,0,0,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#333;
  font-size:2rem;
  cursor:pointer;
  transition:1.25s;
  z-index:5;
}
.menu.active .toggle{
  transform:rotate(360deg);
  box-shadow: 0 6px 8px rgba(0,0,0,0.15),
    0 0 0 2px #333,
    0 0 0 8px #fff;
}
.menu li{
  position:absolute;
  left:0;
  list-style:none;
  transition:0.5s;
  transform:rotate(calc(360deg/8 * var(--i)));
  transform-origin:140px;
  scale:0;
  transition-delay: calc(0.05s * var(--i));
}
.menu.active li{
  scale:1;
}
.menu li a{
  position:relative;
  display:flex;
 transform:rotate(calc(360deg/-8 * var(--i)));
  width:60px;
  height:60px;
  background-color:#FFF;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:1.75rem;
  color:var(--clr);
   box-shadow:0 3px 4px rgba(0,0,0,0.15);
  transition:0.5s;
}
.menu li:hover a{
  font-size:2.5rem;
  box-shadow:0 0 0 2px var(--clr),
    0 0 0 6px #fff;
}

const menu=document.querySelector(".menu");
const toggle=document.querySelector(".toggle");
toggle.addEventListener("click",()=>{
  menu.classList.toggle("active");
})

믿음은 강력한 영향력을 행사한다.
우리의 뇌는 우리가 믿고 기대하는 방향으로 작동한다.
뇌가 작동하기 시작하면
신체는 그 믿음이 사실인 것처럼 반응한다.
실제로 목이 마르거나 귀가 막히고,
병이 나거나 건강해지는 경험을 하는 것이다.
-허버트 벤슨, 'Timeless healing'의 저자


말과 행동으로 자신이 어디로 가고 있는지 알고 있음을 보여줄 때,
세상은 그를 위해 길을 비킵니다. (나폴레온 힐)

자신의 꿈을 향해 당당하게 나아간다면,
그리고 상상해온 삶을 위해 노력한다면
평소에 얘기치 못했던 성공을 만나게 될 것입니다. (핸리 데이비드 소로)

자연은 인간도
자신의 일부라는 걸
여러 경로를 통해 알려 준다.
때로는 우리 인간들 스스로가 서로에게
그 메시지를 전하는 존재이기도 하다.
살아 있는 모든 존재가 사랑하고
사랑받아야 한다.


- 홍시야의 《나무 마음 나무》 중에서 -


* 사람 사이에
가장 따뜻하고 행복한 것은
서로 사랑하고 사랑받는 관계입니다.
한걸음 더 나아가 인간과 자연도 다르지 않습니다.
자연이 파괴되면 인간의 삶도 함께 붕괴됩니다.
자연 속에 살아있는 뭇 생명들에도
사랑을 보내요. 나를 사랑하듯.

Ctrl + P : 파일 찾기