Thank you veterans!

In this example below you will see how to do a Thank you veterans! with some HTML / CSS and Javascript

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

Thumbnail
This awesome code was written by jkantner, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jkantner ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<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/jkantner/thank-you-veterans-aBdgZB */
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%, #fff, #fff 50%, transparent 50%, transparent), radial-gradient(312.5px 150px at 70% 25%, #6c633d, #6c633d 50%, transparent 50%, transparent);
  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);
  }
}

Comments