Thank you veterans!

Army helmet drawn using CSS to honor those who fought for our countryNote: IE does not support ::after animation used for helmet strap.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Thank you veterans!</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700'>

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

  
</head>

<body>
  <h1>Thank you veterans!</h1>
<div class="helmet-container" ontouchstart="">
  <div class="helmet"></div>
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  background: #aff;
  font-family: Source Sans Pro, serif;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

h1 {
  color: #900;
  font-size: 43.75px;
  line-height: 56.25px;
  margin-bottom: 43.75px;
  text-align: center;
}

.helmet-container {
  width: 250px;
  height: 212.5px;
  transform: rotate(-15deg);
  transition: all 0.08s linear;
  will-change: transform;
}
.helmet-container:hover {
  transform: rotate(0deg);
}
.helmet-container:hover .helmet::after {
  animation: swing 0.32s linear forwards;
}

.helmet {
  background-color: #605836;
  background-image: radial-gradient(25px 25px at 70% 25%, #ffffff, #ffffff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), radial-gradient(312.5px 150px at 70% 25%, #6c633d, #6c633d 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0));
  border-radius: 120.5375px 120.5375px 120.5375px 120.5375px / 106.25px 106.25px 25px 25px;
  box-shadow: 0 -3.75px 0 #484229 inset;
  margin: auto;
  position: relative;
  height: 125px;
  width: 212.5px;
}
.helmet::before, .helmet::after {
  content: "";
  position: absolute;
}
.helmet::before {
  background: #605836;
  border-radius: 50%;
  top: 87.5px;
  left: -12.5px;
  height: 50px;
  width: 243.75px;
  z-index: -1;
}
.helmet::after {
  border: 18.75px solid #a89a5f;
  border-top: 0;
  border-radius: 0 0 125px 87.5px / 0 0 125px 125px;
  top: 130.375px;
  left: 12%;
  height: 63.75px;
  width: 100px;
  z-index: -2;
  transform-origin: 50% 0;
}

@keyframes swing {
  from {
    transform: skewX(0deg);
  }
  25% {
    transform: skewX(15deg);
  }
  75% {
    transform: skewX(-5deg);
  }
  to {
    transform: skewX(0deg);
  }
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Thank you veterans! ) is write by Jon Kantner, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Jon Kantner

More from Jon Kantner

You Might Also Like