Creative Animate Css Rainbow circle

Creative Animate Css Rainbow circle

Animation, Css, Download Resources, HTML, Website No Comments on Creative Animate Css Rainbow circle
Creative Animate Css Rainbow circle

We can do a lot of things with CSS like build modals, make beautiful text effects, draw a Viking shield, and even create a heart shape. There’s also plenty that we can do with CSS3 Box Shadows, and in this post we are going to look at how some designers play around with CSS shadows to some great results.

In this list you will see CSS shadows used in creating ticking counters, 3D effects on text, pixel art, simple animation. To see more of the same work, do check out the designers’ portfolios.



Demo/Download

HTML

<div class="circle"></div>

CSS

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: -webkit-radial-gradient(center ellipse, #ffffff 0%, #eeeeee 80%);
  background: radial-gradient(ellipse at center, #ffffff 0%, #eeeeee 80%);
}

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

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.circle {
  position: relative;
  width: 35em;
  border-radius: 50%;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  box-shadow: inset 3.78886em -2.1875em 0em 0em rgba(255, 0, 0, 0.45), inset -3.78886em -2.1875em 0em 0em rgba(235, 255, 0, 0.54), inset 0 4.375em 0em 0em rgba(0, 133, 255, 0.53), inset -3.78886em 2.1875em 0em 0em rgba(22, 243, 3, 0.55), inset 3.78886em 2.1875em 0em 0em rgba(190, 11, 224, 0.55), inset 0 -4.375em 0em 0em rgba(253, 127, 11, 0.54);
  -webkit-animation: spin 120s linear infinite;
          animation: spin 120s linear infinite;
}
.circle:hover {
  box-shadow: inset 1.89443em -1.09375em 0em 0em rgba(255, 0, 0, 0.45), inset -1.89443em -1.09375em 0em 0em rgba(235, 255, 0, 0.54), inset 0 2.1875em 0em 0em rgba(0, 133, 255, 0.53), inset -1.89443em 1.09375em 0em 0em rgba(22, 243, 3, 0.55), inset 1.89443em 1.09375em 0em 0em rgba(190, 11, 224, 0.55), inset 0 -2.1875em 0em 0em rgba(253, 127, 11, 0.54);
}
.circle:before {
  content: "";
  display: block;
  padding-top: 100%;
}

Author

Related Articles

Leave a comment

Creative Buck ©2016. All Rights Reserved.

Search

Back to Top