website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

Rotating Circle Social Media Icons

Rotating Circle Social Media Icons

  • 69
  • 18-Nov-2021

INDEX.HTML

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <link rel="stylesheet" href="style.css" />

    <link

      rel="stylesheet"

      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"

      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"

      crossorigin="anonymous"

    />

    <title>Rotating Circle Hamburger Menu Example</title>

  </head>

 

  <body>

    <div class="menu">

      <div class="btn trigger">

        <span class="line"></span>

      </div>

      <div class="icons">

        <div class="rotater">

          <div class="btn btn-icon">

            <i class="fab fa-instagram"></i>

          </div>

        </div>

        <div class="rotater">

          <div class="btn btn-icon">

            <i class="fab fa-facebook"></i>

          </div>

        </div>

        <div class="rotater">

          <div class="btn btn-icon">

            <i class="fab fa-google-plus"></i>

          </div>

        </div>

        <div class="rotater">

          <div class="btn btn-icon">

            <i class="fab fa-twitter"></i>

          </div>

        </div>

        <div class="rotater">

          <div class="btn btn-icon">

            <i class="fab fa-dribbble"></i>

          </div>

        </div>

        <div class="rotater">

          <div class="btn btn-icon">

            <i class="fab fa-linkedin"></i>

          </div>

        </div>

        <div class="rotater">

          <div class="btn btn-icon">

            <i class="fab fa-github"></i>

          </div>

        </div>

        <div class="rotater">

          <div class="btn btn-icon">

            <i class="fab fa-behance"></i>

          </div>

        </div>

      </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>

    <script>

      $(document).ready(function () {

        $(".trigger").click(function () {

          $(".menu").toggleClass("active");

        });

      });

    </script>

  </body>

</html>

 

 

STYLE.CSS

body {

  height: 100%;

  overflow: hidden;

  background-color: #6e72fc;

  background-image: linear-gradient(315deg, #6e72fc 0%, #ad1deb 74%);

}

 

.menu {

  width: 5em;

  height: 5em;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translateX(-50%) translateY(-50%);

}

 

.menu .btn {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.15);

  opacity: 0;

  z-index: -10;

  cursor: pointer;

  transition: opacity 1s, z-index 0.3s, transform 1s;

  transform: translateX(0);

}

 

.menu .trigger {

  opacity: 1;

  z-index: 100;

  cursor: pointer;

  transition: transform 0.3s;

}

 

.menu .trigger:hover {

  transform: scale(1.2);

}

 

.menu .line {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translateX(-50%) translateY(-50%);

  width: 60%;

  height: 6px;

  background: #fff;

  border-radius: 6px;

  transition: background-color 0.3s, height 0.3s, top 0.3s;

}

 

.menu .line:before,

.menu .line:after {

  content: "";

  display: block;

  position: absolute;

  left: 0;

  width: 100%;

  height: 6px;

  background: #fff;

  border-radius: 6px;

  transition: background-color 0.3s, transform 0.3s;

}

 

.menu .line:before {

  top: -12px;

  transform-origin: 15% 100%;

}

 

.menu .line:after {

  top: 12px;

  transform-origin: 25% 30%;

}

 

.icons .fab {

  font-size: 3em;

  color: #fff;

  transition: color 0.3s;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translateX(-50%) translateY(-50%);

}

 

.btn:hover  {

    background-color: #fbb034;

    background-image: linear-gradient(315deg, #fbb034 0%, #ffdd00 74%);

    transition: all .4s ease;

}

.menu .rotater {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  transform-origin: 50% 50%;

}

 

.menu.active .btn-icon {

  opacity: 1;

  z-index: 50;

}

 

.menu.active .trigger .line {

  height: 0px;

  top: 45%;

}

 

.menu.active .trigger .line:before {

  transform: rotate(45deg);

  width: 110%;

}

 

.menu.active .trigger .line:after {

  transform: rotate(-45deg);

  width: 110%;

}

 

.rotater:nth-child(1) {

  transform: rotate(-22.5deg);

}

 

.menu.active .rotater:nth-child(1) .btn-icon {

  transform: translateY(-10em) rotate(22.5deg);

}

 

.rotater:nth-child(2) {

  transform: rotate(22.5deg);

}

 

.menu.active .rotater:nth-child(2) .btn-icon {

  transform: translateY(-10em) rotate(-22.5deg);

}

 

.rotater:nth-child(3) {

  transform: rotate(67.5deg);

}

 

.menu.active .rotater:nth-child(3) .btn-icon {

  transform: translateY(-10em) rotate(-67.5deg);

}

 

.rotater:nth-child(4) {

  transform: rotate(112.5deg);

}

 

.menu.active .rotater:nth-child(4) .btn-icon {

  transform: translateY(-10em) rotate(-112.5deg);

}

 

.rotater:nth-child(5) {

  transform: rotate(157.5deg);

}

 

.menu.active .rotater:nth-child(5) .btn-icon {

  transform: translateY(-10em) rotate(-157.5deg);

}

 

.rotater:nth-child(6) {

  transform: rotate(202.5deg);

}

 

.menu.active .rotater:nth-child(6) .btn-icon {

  transform: translateY(-10em) rotate(-202.5deg);

}

 

.rotater:nth-child(7) {

  transform: rotate(247.5deg);

}

 

.menu.active .rotater:nth-child(7) .btn-icon {

  transform: translateY(-10em) rotate(-247.5deg);

}

 

.rotater:nth-child(8) {

  transform: rotate(292.5deg);

}

 

.menu.active .rotater:nth-child(8) .btn-icon {

  transform: translateY(-10em) rotate(-292.5deg);

}

 

 

Download

Atechseva
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat with Me