-->
gudangupdate.com
profile

Gudang Update

Home  ›  Blogging  ›  Tutorials
How to Create a Hummingbird Animated Background with Css

How to Create a Hummingbird Animated Background with Css

Date: September 04, 2019
How To Create A Hummingbird Animated Background With Css
In the previous discussion I have explained, java singleton understanding and complete definition. Well for today it's the same, I will again give a simple tutorial that is making a create hummingbird background animated with css.

This is very easy for coding masters, but for beginners, it is complicated and very confusing. But here I will discuss in detail below how to make it.
Things that must be considered, about how to make it and what is needed to be able to make this background is that we must prepare among them:
1. Css
2. Html

It is clear? If so, let's continue this discussion. And for the steps, you can see the following.

How to Make a Hummingbird Background With Css

The first is that we create the CSS file first. Here is an example code: 

@import url("https://fonts.googleapis.com/css?family=Lora:700");
*, *:after, *:before {
  box-sizing: border-box;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}
body,
.wrapper {
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(-45deg, #111, #355);
  font-family: Lora, serif;
  overflow: hidden;
}

.hummingbird {
  margin-top: 50px;
  width: 200px;
  height: 200px;
  -webkit-perspective: 60rem;
          perspective: 60rem;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
  -webkit-transform-origin: center;
          transform-origin: center;
  pointer-events: none;
}
@media (max-width: 768px) {
  .hummingbird {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
.hummingbird .body {
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-animation: rotate 15s linear infinite;
          animation: rotate 15s linear infinite;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
.hummingbird .body:before, .hummingbird .body:after {
  content: '';
  display: block;
  width: 70px;
  height: 100%;
  position: absolute;
  left: 50%;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  background: linear-gradient(to bottom, rgba(119, 238, 180, 0.8), rgba(83, 169, 197, 0.8), transparent);
}
.hummingbird .body:before {
  -webkit-transform: rotateZ(30deg) rotateY(30deg);
          transform: rotateZ(30deg) rotateY(30deg);
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%);
          clip-path: polygon(0 0, 100% 10%, 100% 100%);
}
.hummingbird .body:after {
  -webkit-transform: rotateZ(30deg) rotateY(-30deg);
          transform: rotateZ(30deg) rotateY(-30deg);
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%);
          clip-path: polygon(0 0, 100% 10%, 100% 100%);
}
.hummingbird .body .back {
  width: 60px;
  height: 100%;
  position: absolute;
  background: linear-gradient(to bottom, rgba(119, 238, 180, 0.8), rgba(83, 169, 197, 0.8), transparent);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
  -webkit-transform: rotateY(90deg) rotateX(-13deg) translateZ(55px) translateY(-45px);
          transform: rotateY(90deg) rotateX(-13deg) translateZ(55px) translateY(-45px);
}
.hummingbird .body .wings {
  position: absolute;
  left: 35%;
  top: 40px;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.hummingbird .body .wings:before, .hummingbird .body .wings:after {
  content: '';
  display: block;
  width: 70px;
  height: 100%;
  position: absolute;
  left: 50%;
  top: -25px;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  background: linear-gradient(to top, #d46f30, transparent);
}
.hummingbird .body .wings:before {
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 0);
          clip-path: polygon(100% 0, 100% 100%, 0 0);
  -webkit-animation: beating-left 2s ease-in-out infinite;
          animation: beating-left 2s ease-in-out infinite;
}
@-webkit-keyframes beating-left {
  0% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(180deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(180deg);
  }
  100% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
  }
}
@keyframes beating-left {
  0% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(180deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(180deg);
  }
  100% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
  }
}
.hummingbird .body .wings:after {
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 0);
          clip-path: polygon(100% 0, 100% 100%, 0 0);
  -webkit-animation: beating-right 2s ease-in-out infinite;
          animation: beating-right 2s ease-in-out infinite;
}
@-webkit-keyframes beating-right {
  0% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(-180deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(-180deg);
  }
  100% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
  }
}
@keyframes beating-right {
  0% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(-180deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(-180deg);
  }
  100% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
  }
}
.hummingbird .body .head:before, .hummingbird .body .head:after {
  content: '';
  display: block;
  width: 50px;
  height: 30%;
  position: absolute;
  left: 55%;
  top: -45px;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  background: linear-gradient(to bottom, #77eeb4, transparent);
}
.hummingbird .body .head:before {
  -webkit-transform: rotateZ(0deg) rotateY(40deg);
          transform: rotateZ(0deg) rotateY(40deg);
  -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%);
          clip-path: polygon(0 20%, 100% 0, 100% 100%);
}
.hummingbird .body .head:after {
  -webkit-transform: rotateZ(0deg) rotateY(-40deg);
          transform: rotateZ(0deg) rotateY(-40deg);
  -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%);
          clip-path: polygon(0 20%, 100% 0, 100% 100%);
}
.hummingbird .body .head .nape:after {
  content: '';
  display: block;
  width: 50px;
  height: 35px;
  position: absolute;
  top: 0%;
  background: linear-gradient(to bottom, rgba(119, 238, 180, 0.8), rgba(83, 169, 197, 0.8), transparent);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  -webkit-transform: rotateY(90deg) rotateX(-73deg) translateZ(-37px) translateY(-110px);
          transform: rotateY(90deg) rotateX(-73deg) translateZ(-37px) translateY(-110px);
}
.hummingbird .body .head .beak:before, .hummingbird .body .head .beak:after {
  content: '';
  display: block;
  width: 10px;
  height: 60%;
  position: absolute;
  left: 75%;
  top: -45px;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  background: linear-gradient(to top, #d1c6da, transparent);
}
.hummingbird .body .head .beak:before {
  -webkit-transform: rotateZ(-105deg) rotateY(25deg);
          transform: rotateZ(-105deg) rotateY(25deg);
  -webkit-clip-path: polygon(0 0, 100% 1%, 100% 100%);
          clip-path: polygon(0 0, 100% 1%, 100% 100%);
}
.hummingbird .body .head .beak:after {
  -webkit-transform: rotateZ(-105deg) rotateY(-25deg);
          transform: rotateZ(-105deg) rotateY(-25deg);
  -webkit-clip-path: polygon(0 0, 100% 1%, 100% 100%);
          clip-path: polygon(0 0, 100% 1%, 100% 100%);
}
.hummingbird .platform {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  bottom: 0px;
  -webkit-transform: rotateX(90deg) translateZ(-100px);
          transform: rotateX(90deg) translateZ(-100px);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 8px dashed #53a9c5;
  box-shadow: 0 0 50px 0px #53a9c5;
  font-weight: bold;
}

h1 {
  color: #FFF;
  text-align: center;
  position: absolute;
  font-family: serif;
  font-size: 20px;
  bottom: 10%;
}
If so, you just save it. Continue to the next step which is, we create the html. For example below: 

<div class="wrapper">
  <div class="hummingbird js-3dbox">
    <div class="body">
      <div class="back"></div>
      <div class="wings"></div>
      <div class="head">
        <div class="nape"></div>
        <div class="beak"></div>
      </div>
    </div>
    
    <div class="platform">Hummingbird</div>
  </div>
  
  <h1>Hummingbird</h1>
</div>
For the overall code you can see below in:

<html>
<head>
<meta charset='utf-8'/> 
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<meta content='telephone=no' name='format-detection'/>
<style>
@import url("https://fonts.googleapis.com/css?family=Lora:700");
*, *:after, *:before {
  box-sizing: border-box;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}
body,
.wrapper {
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(-45deg, #111, #355);
  font-family: Lora, serif;
  overflow: hidden;
}

.hummingbird {
  margin-top: 50px;
  width: 200px;
  height: 200px;
  -webkit-perspective: 60rem;
          perspective: 60rem;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
  -webkit-transform-origin: center;
          transform-origin: center;
  pointer-events: none;
}
@media (max-width: 768px) {
  .hummingbird {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
.hummingbird .body {
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-animation: rotate 15s linear infinite;
          animation: rotate 15s linear infinite;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
.hummingbird .body:before, .hummingbird .body:after {
  content: '';
  display: block;
  width: 70px;
  height: 100%;
  position: absolute;
  left: 50%;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  background: linear-gradient(to bottom, rgba(119, 238, 180, 0.8), rgba(83, 169, 197, 0.8), transparent);
}
.hummingbird .body:before {
  -webkit-transform: rotateZ(30deg) rotateY(30deg);
          transform: rotateZ(30deg) rotateY(30deg);
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%);
          clip-path: polygon(0 0, 100% 10%, 100% 100%);
}
.hummingbird .body:after {
  -webkit-transform: rotateZ(30deg) rotateY(-30deg);
          transform: rotateZ(30deg) rotateY(-30deg);
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%);
          clip-path: polygon(0 0, 100% 10%, 100% 100%);
}
.hummingbird .body .back {
  width: 60px;
  height: 100%;
  position: absolute;
  background: linear-gradient(to bottom, rgba(119, 238, 180, 0.8), rgba(83, 169, 197, 0.8), transparent);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
  -webkit-transform: rotateY(90deg) rotateX(-13deg) translateZ(55px) translateY(-45px);
          transform: rotateY(90deg) rotateX(-13deg) translateZ(55px) translateY(-45px);
}
.hummingbird .body .wings {
  position: absolute;
  left: 35%;
  top: 40px;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.hummingbird .body .wings:before, .hummingbird .body .wings:after {
  content: '';
  display: block;
  width: 70px;
  height: 100%;
  position: absolute;
  left: 50%;
  top: -25px;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  background: linear-gradient(to top, #d46f30, transparent);
}
.hummingbird .body .wings:before {
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 0);
          clip-path: polygon(100% 0, 100% 100%, 0 0);
  -webkit-animation: beating-left 2s ease-in-out infinite;
          animation: beating-left 2s ease-in-out infinite;
}
@-webkit-keyframes beating-left {
  0% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(180deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(180deg);
  }
  100% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
  }
}
@keyframes beating-left {
  0% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(180deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(180deg);
  }
  100% {
    -webkit-transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(-10deg) translateZ(30px) rotateX(0deg);
  }
}
.hummingbird .body .wings:after {
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 0);
          clip-path: polygon(100% 0, 100% 100%, 0 0);
  -webkit-animation: beating-right 2s ease-in-out infinite;
          animation: beating-right 2s ease-in-out infinite;
}
@-webkit-keyframes beating-right {
  0% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(-180deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(-180deg);
  }
  100% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
  }
}
@keyframes beating-right {
  0% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(-180deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(-180deg);
  }
  100% {
    -webkit-transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
            transform: rotateZ(-75deg) rotateY(10deg) translateZ(-30px) rotateX(0deg);
  }
}
.hummingbird .body .head:before, .hummingbird .body .head:after {
  content: '';
  display: block;
  width: 50px;
  height: 30%;
  position: absolute;
  left: 55%;
  top: -45px;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  background: linear-gradient(to bottom, #77eeb4, transparent);
}
.hummingbird .body .head:before {
  -webkit-transform: rotateZ(0deg) rotateY(40deg);
          transform: rotateZ(0deg) rotateY(40deg);
  -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%);
          clip-path: polygon(0 20%, 100% 0, 100% 100%);
}
.hummingbird .body .head:after {
  -webkit-transform: rotateZ(0deg) rotateY(-40deg);
          transform: rotateZ(0deg) rotateY(-40deg);
  -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%);
          clip-path: polygon(0 20%, 100% 0, 100% 100%);
}
.hummingbird .body .head .nape:after {
  content: '';
  display: block;
  width: 50px;
  height: 35px;
  position: absolute;
  top: 0%;
  background: linear-gradient(to bottom, rgba(119, 238, 180, 0.8), rgba(83, 169, 197, 0.8), transparent);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  -webkit-transform: rotateY(90deg) rotateX(-73deg) translateZ(-37px) translateY(-110px);
          transform: rotateY(90deg) rotateX(-73deg) translateZ(-37px) translateY(-110px);
}
.hummingbird .body .head .beak:before, .hummingbird .body .head .beak:after {
  content: '';
  display: block;
  width: 10px;
  height: 60%;
  position: absolute;
  left: 75%;
  top: -45px;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  background: linear-gradient(to top, #d1c6da, transparent);
}
.hummingbird .body .head .beak:before {
  -webkit-transform: rotateZ(-105deg) rotateY(25deg);
          transform: rotateZ(-105deg) rotateY(25deg);
  -webkit-clip-path: polygon(0 0, 100% 1%, 100% 100%);
          clip-path: polygon(0 0, 100% 1%, 100% 100%);
}
.hummingbird .body .head .beak:after {
  -webkit-transform: rotateZ(-105deg) rotateY(-25deg);
          transform: rotateZ(-105deg) rotateY(-25deg);
  -webkit-clip-path: polygon(0 0, 100% 1%, 100% 100%);
          clip-path: polygon(0 0, 100% 1%, 100% 100%);
}
.hummingbird .platform {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  bottom: 0px;
  -webkit-transform: rotateX(90deg) translateZ(-100px);
          transform: rotateX(90deg) translateZ(-100px);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 8px dashed #53a9c5;
  box-shadow: 0 0 50px 0px #53a9c5;
  font-weight: bold;
}

h1 {
  color: #FFF;
  text-align: center;
  position: absolute;
  font-family: serif;
  font-size: 20px;
  bottom: 10%;
}
</style>
</head>
<body>
<div class="wrapper">
  <div class="hummingbird js-3dbox">
    <div class="body">
      <div class="back"></div>
      <div class="wings"></div>
      <div class="head">
        <div class="nape"></div>
        <div class="beak"></div>
      </div>
    </div>
    
    <div class="platform">Hummingbird</div>
  </div>
  
  <h1>Hummingbird</h1>
</div>

</body>
</html>
Already? Save the Html file again, the same as the first step. The last step is, please just access it through your respective browser and see how it works.

Is this method 100% successful? Yes, of course, because before I made the tutorial I tried it first and the results were good.

Live Demo.
That's the tutorial this time about, How to Create a Hummingbird Background With Css. Less and more sorry, may be useful for you all.

Load comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

CLOSE ADS
CLOSE ADS