Loading, please wait ...
...

Pure CSS3 Spinning Social Media Icons

8 months ago 585 Views






CSS3 animations property allows animation of HTML elements without using JavaScript. For using CSS3 animation; we need to use keyframes to define the animation rules. In this tutorial, We will use CSS transform property and the rotate() function to create spinning social media icons effects.

HTML structure


<div class="icons-container">
    <div class="social-icons spinned">
        <a class="item facebook" href="#"><em class="fa fa-facebook"></em></a>
        <a class="item twitter" href="#"><em class="fa fa-twitter"></em></a>
        <a class="item google" href="#"><em class="fa fa-google"></em></a>
        <a class="item linkedin" href="#"><em class="fa fa-linkedin"></em></a>
        <a class="item instagram" href="#"><em class="fa fa-instagram"></em></a>
    </div>
</div>

Adding style


/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

body {
  font-size: 18px;
  color: #333;
  background-color: #fff;
}

a {
  color: #26a69a;
  text-decoration: none;
}

/* -------------------------------- 

Main Components 

-------------------------------- */
.icons-container{
    height: 100px;
    width: 400px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}

.social-icons .item {
    display: inline-block;
    margin: 5px;
    width: 50px;
    height: 50px;
    transition: .3s all;
    position: relative;
    -webkit-transition: .3s all;
    text-align: center;
    color: #fff;
    background-color: #fff;
    line-height: 48px;
    border-radius: 50px;
    -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
    -moz-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
    box-shadow: 0px 5px 11px 0px rgba(0,0,0,0.18), 0px 4px 15px 0px rgba(0,0,0,0.15);
}

.social-icons.spinned .item:hover {
    -webkit-animation: Social-Icons-Flipping .3s;
    animation: Social-Icons-Flipping .3s
}
.social-icons .item:hover {
    text-decoration: none;
    background-color: #42474E;
    box-shadow: 0 -1px 0 transparent inset, 0 2px 3px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .3);
    color: #fff!important
}
.social-icons .item .fa {
    font-size: 15px;
    font-weight: 500;
}

.social-icons .facebook {
    color: #425F9C!important
}
.social-icons .twitter {
    color: #00ACEE!important
}
.social-icons .google {
    color: #c00!important
}
.social-icons .linkedin {
    color: #0073B2!important
}
.social-icons .youtube {
    color: #EB3E40!important
}
.social-icons .instagram {
    color: #5E8AAC!important
}

.facebook:hover {
    background-color: #425F9C!important
}
.twitter:hover {
    background-color: #00ACEE!important
}
.google:hover {
    background-color: #c00!important
}
.linkedin:hover {
    background-color: #0073B2!important
}
.youtube:hover {
    background-color: #EB3E40!important
}
.instagram:hover {
    background-color: #5E8AAC!important
}

@-webkit-keyframes Social-Icons-Flipping {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@keyframes Social-Icons-Flipping {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

DemoDownload


Pure CSS3 Spinning Social Media Icons

8 months ago 585 Views

CSS3 animations property allows animation of HTML elements without using JavaScript. For using CSS3 animation; we need to use keyframes to define the animation rules. In this tutorial, We will use CSS transform property and the rotate() function to create spinning social media icons effects.

HTML structure


<div class="icons-container">
    <div class="social-icons spinned">
        <a class="item facebook" href="#"><em class="fa fa-facebook"></em></a>
        <a class="item twitter" href="#"><em class="fa fa-twitter"></em></a>
        <a class="item google" href="#"><em class="fa fa-google"></em></a>
        <a class="item linkedin" href="#"><em class="fa fa-linkedin"></em></a>
        <a class="item instagram" href="#"><em class="fa fa-instagram"></em></a>
    </div>
</div>

Adding style


/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

body {
  font-size: 18px;
  color: #333;
  background-color: #fff;
}

a {
  color: #26a69a;
  text-decoration: none;
}

/* -------------------------------- 

Main Components 

-------------------------------- */
.icons-container{
    height: 100px;
    width: 400px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}

.social-icons .item {
    display: inline-block;
    margin: 5px;
    width: 50px;
    height: 50px;
    transition: .3s all;
    position: relative;
    -webkit-transition: .3s all;
    text-align: center;
    color: #fff;
    background-color: #fff;
    line-height: 48px;
    border-radius: 50px;
    -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
    -moz-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
    box-shadow: 0px 5px 11px 0px rgba(0,0,0,0.18), 0px 4px 15px 0px rgba(0,0,0,0.15);
}

.social-icons.spinned .item:hover {
    -webkit-animation: Social-Icons-Flipping .3s;
    animation: Social-Icons-Flipping .3s
}
.social-icons .item:hover {
    text-decoration: none;
    background-color: #42474E;
    box-shadow: 0 -1px 0 transparent inset, 0 2px 3px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .3);
    color: #fff!important
}
.social-icons .item .fa {
    font-size: 15px;
    font-weight: 500;
}

.social-icons .facebook {
    color: #425F9C!important
}
.social-icons .twitter {
    color: #00ACEE!important
}
.social-icons .google {
    color: #c00!important
}
.social-icons .linkedin {
    color: #0073B2!important
}
.social-icons .youtube {
    color: #EB3E40!important
}
.social-icons .instagram {
    color: #5E8AAC!important
}

.facebook:hover {
    background-color: #425F9C!important
}
.twitter:hover {
    background-color: #00ACEE!important
}
.google:hover {
    background-color: #c00!important
}
.linkedin:hover {
    background-color: #0073B2!important
}
.youtube:hover {
    background-color: #EB3E40!important
}
.instagram:hover {
    background-color: #5E8AAC!important
}

@-webkit-keyframes Social-Icons-Flipping {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@keyframes Social-Icons-Flipping {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

DemoDownload