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

  • 119
  • 18-Nov-2021
  • Codepen

  • Details

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

Preview
whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat