#dailycssimages 28 - Cogs

dailycssimages-28-cogs.markdown

#dailycssimages 28 - Cogs

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<div class="container">
  <div class="cog-largest">
    <div class="large-tooth"></div>
    <div class="large-tooth"></div>
    <div class="large-tooth"></div>
    <div class="large-tooth"></div>
    <div class="large-tooth"></div>
    <div class="large-tooth"></div>
    <div class="large-tooth"></div>
    <div class="large-tooth"></div>
    <div class="large-tooth"></div>
    <div class="large-tooth"></div>
    <div class="large-tooth"></div>
    <div class="large-tooth"></div>
  </div>
  <div class="cog-medium">
    <div class="medium-tooth"></div>
    <div class="medium-tooth"></div>
    <div class="medium-tooth"></div>
    <div class="medium-tooth"></div>
    <div class="medium-tooth"></div>
    <div class="medium-tooth"></div>
 
  </div>
  
  <div class="cog-small-top">
    <div class="small-star"></div>
    <div class="inner"></div>
    <div class="teeth"></div>
    <div class="teeth"></div>
    <div class="teeth"></div>
    <div class="teeth"></div>
    <div class="teeth"></div>
    <div class="teeth"></div>
    
  </div>
<!--   <div class="cog-small-bottom"></div> -->
  <div class="cog-tiny"></div>
</div>

script.js

// Source: https://s-media-cache-ak0.pinimg.com/736x/60/1d/d0/601dd0047e3f354ce93f9b9efbb0ff38.jpg

// Source: https://s-media-cache-ak0.pinimg.com/736x/54/0e/7a/540e7a907a3819d4f1f4be27bc69a8a3.jpg

style.css

* {
  box-sizing: border-box;
}

body {
  background-color: lightcyan;
}

.container {
  position: relative;
  width: 40em;
  height: 40em;
}

.cog-largest {
  width: 15em;
  height: 15em;
  border-radius: 100%;
  border: 0.5em solid black;
  position: absolute;
  top: 10%;
  left: 40%;
  -webkit-animation: rotate-counter-clockwise 3s infinite linear;
  -moz-animation: rotate-counter-clockwise 3s infinite linear;
}

.large-tooth {
  width: 1em;
  height: 1.5em;
  background-color: black;
  position: absolute;
}

.large-tooth:nth-child(1) {
  position: absolute;
  top: 1em;
  left: 1.5em;
  transform: rotate(-40deg);
}

.large-tooth:nth-child(2) {
  position: absolute;
  top: -0.8em;
  left: 4.5em;
  transform: rotate(-20deg);
}

.large-tooth:nth-child(3) {
  position: absolute;
  top: -0.9em;
  left: 8em;
  transform: rotate(10deg);
}

.large-tooth:nth-child(4) {
  position: absolute;
  top: 0.5em;
  left: 11em;
  transform: rotate(40deg);
}

.large-tooth:nth-child(5) {
  position: absolute;
  top: 3em;
  left: 13em;
  transform: rotate(60deg);
}

.large-tooth:nth-child(6) {
  position: absolute;
  top: 6.5em;
  left: 13.7em;
  transform: rotate(90deg);
}

.large-tooth:nth-child(7) {
  position: absolute;
  top: 10em;
  left: 12.7em;
  transform: rotate(120deg);
}

.large-tooth:nth-child(8) {
  position: absolute;
  top: 12.5em;
  left: 10em;
  transform: rotate(150deg);
}

.large-tooth:nth-child(9) {
  position: absolute;
  top: 13.4em;
  left: 6em;
  transform: rotate(360deg);
}

.large-tooth:nth-child(10) {
  position: absolute;
  top: 11.5em;
  left: 1.7em;
  transform: rotate(40deg);
}

.large-tooth:nth-child(11) {
  position: absolute;
  top: 8em;
  left: -0.6em;
  transform: rotate(80deg);
}

.large-tooth:nth-child(12) {
  position: absolute;
  top: 4em;
  left: -0.5em;
  transform: rotate(110deg);
}

.cog-medium {
  width: 7em;
  height: 7em;
  border-radius: 100%;
  border: 0.5em solid black;
  position: absolute;
  top: 26%;
  left: 46%;
  -webkit-animation: rotate-clockwise 3s infinite linear;
  -moz-animation: rotate-clockwise 3s infinite linear;
}

/* .cog-medium:after {
  height: 6em;
  width: 6em;
  -moz-border-radius: 48px;
  -webkit-border-radius: 48px;
} */

.medium-tooth {
  border-bottom: 0.8em solid black;
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	height: 0;
	width: 2em;
  position: absolute;	
}

.medium-tooth:nth-child(1) {
  position: absolute;
  left: -0.3em;
  top: -0.4em;
  transform: rotate(-37deg);
}

.medium-tooth:nth-child(2) {
  position: absolute;
  left: 3.5em;
  top: -0.8em;
  transform: rotate(20deg);
}

.medium-tooth:nth-child(3) {
  position: absolute;
  left: 5.7em;
  top: 2em;
  transform: rotate(80deg);
}

.medium-tooth:nth-child(4) {
  position: absolute;
  left: 4.4em;
  top: 5.5em;
  transform: rotate(140deg);
}

.medium-tooth:nth-child(5) {
  position: absolute;
  left: 0.8em;
  top: 6.1em;
  transform: rotate(200deg);
}

.medium-tooth:nth-child(6) {
  position: absolute;
  left: -1.5em;
  top: 3.8em;
  transform: rotate(250deg);
}

.cog-small-top {
  width: 4em;
  height: 4em;
  border-radius: 100%;
  border: 0.5em solid black;
  position: absolute;
  top: 16%;
  left: 55%;
  -webkit-animation: rotate-clockwise 3s infinite linear;
  -moz-animation: rotate-clockwise 3s infinite linear;
}

.small-star {
  background: black;
  width: 2.2em;
  height: 2.2em;
  position: absolute;
  text-align: center;
  left: 0.4em;
  top: 0.4em;
}
.small-star:before, .small-star:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 2.2em;
    width: 2.2em;
    background: black;
}
.small-star:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
}
.small-star:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
}

.inner {
  width: 1em; 
  height: 1em;
  background-color: lightcyan;
  position: absolute;
  border-radius: 100%;
  top: 1em;
  left: 1em;
}

.cog-small-top > .teeth {
  width: 1em;
  height: 0.5em;
  border-radius: 7em;
  background-color: black;
  position: absolute;
}

.teeth:nth-child(3) {
  position: absolute;
  left: 2.8em;
  top: 2em;
  transform: rotate(30deg);
}

.teeth:nth-child(4) {
  position: absolute;
  left: 1.7em;
  top: 3.1em;
  transform: rotate(70deg);
}

.teeth:nth-child(5) {
  position: absolute;
  left: -0.9em;
  top: 2.2em;
  transform: rotate(140deg);
}

.teeth:nth-child(6) {
  position: absolute;
  left: -0.9em;
  top: 0.3em;
  transform: rotate(210deg);
}

.teeth:nth-child(7) {
  position: absolute;
  left: 0.7em;
  top: -1em;
  transform: rotate(260deg);
}

.teeth:nth-child(8) {
  position: absolute;
  left: 3em;
  top: -0.1em;
  transform: rotate(330deg);
}

.cog-small-bottom {
  width: 4em;
  height: 4em;
  border-radius: 100%;
  border: 0.5em solid black;
  position: absolute;
  top: 20%;
  left: 45%;
  -webkit-animation: rotate-clockwise 3s infinite linear;
  -moz-animation: rotate-clockwise 3s infinite linear;
}

.cog-tiny {
  width: 2em;
  height: 2em;
  border-radius: 100%;
  border: 0.5em solid black;
  position: absolute;
  top: 37%;
  left: 66%;
  -webkit-animation: rotate-counter-clockwise 3s infinite linear;
  -moz-animation: rotate-counter-clockwise 3s infinite linear;
}



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

@-webkit-keyframes rotate-counter-clockwise {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
  @-moz-keyframes rotate-counter-clockwise {
    0% {
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -moz-transform: rotate(-360deg);
      -ms-transform: rotate(-360deg);
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg);
    }
  }