Frontend Forever

Ben10 Omnitrix Animation

About this Code

Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Ben10 Omnitrix Animation . If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

BEN10 :

Ben Tennyson, a 10-year-old kid who is secretly a member of an interplanetary group called the Plumbers, travels on a summer vacation road trip with his cousin Gwen and their grandfather Max in the series. The Tennysons are attacked by a variety of foes while on vacation, including aliens like intergalactic warlord Vilgax, an 11-year-old troublemaker named Kevin Levin with the ability to absorb energy, the crazy scientist Doctor Animo, the enigmatic paramilitary group the Forever Knights, and supernatural beings like interdimensional sorcerer Hex.

Cartoon Network Studios and Man of Action Studios collaborated to develop the American animated television series and media property known as Ben 10. The main character of the book is a young boy named Ben Tennyson who discovers the Omnitrix, an extraterrestrial timepiece that looks like a wristwatch and contains DNA from various alien species. Ben may change into strong aliens with different skills by using the Omnitrix. The Omnitrix comes with ten alien species at first, but later on, Ben adds more by inserting their DNA.

Five years after Ben's initial discovery of the Omnitrix during his summer vacation, the series starts. In order to save his grandfather Max, who has been kidnapped by a xenophobic alien race known as the Highbreeds as part of a scheme to exterminate humans from Earth, Ben has removed the Omnitrix and returned to living a normal life. However, he is compelled to use it once more.

The Ultimatrix, a tool that enables Ben to transform his alien forms into their ultimate forms, replaces the Omnitrix, which was destroyed during Ben's final battle with Vilgax. Ben has gained international fame after his identity was recently made known. Later, Ben, Gwen, and Kevin must stop Diagon—an extradimensional being—from destroying the universe.

Ben obtains the updated and improved Omnitrix, which provides him access to a brand-new batch of aliens in addition to the ones he already knows. Following Gwen's departure for college with Kevin at her side, Ben teams up with Rook Blonko, a strict plumber from the planet Revonnah.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
	background: black;
}
.container{
	width: 100%;
	height: 535px;
}
#bracelet img{
	position: absolute;
	width: 980px;
	top: 16%;
	left: 15%;
}
.watch{
	width: 150px;
	height: 150px;
	left: 44%;
	top: 19%;
	z-index: 10;
	position: absolute;
	box-shadow: 8px 8px 8px green,-2px -2px 3px green;
	background: white;
	border-radius: 50%;
	border: 20px solid black;
	transform-style: preserve-3d;
	transform:perspective(1000px) rotateX(68deg);
}
.display{
	margin: auto;
	width: 0px;
	height: 0px;
	background: rgba(0, 230, 64, .8);
	border: 78px solid;
	border-radius: 50%;
	border-bottom-color: transparent;
	border-top-color: transparent;
}
.watch:hover .display{
	transform: rotateZ(30deg);
	transition: .3s;
}
.watch img{
	position: absolute;
	top: -80%;
	left: -8%;
	width: 180px;
	height: 180px;
	z-index: 10;
	transform-style: preserve-3d;
	transform: rotateX(300deg) translateZ(250px);
	visibility: hidden;
}
.watch:hover img{
	visibility: visible;
	transition-delay: .3s;
}
#shadow{
	width: 158px;
	height: 120px;
	background: linear-gradient(rgba(0,230,64,.1),rgba(0,230,64,.5));
	position: absolute;
	top: -8%;
	left: 4%;
	border-bottom: transparent;
	transform-style: preserve-3d;
	transform-origin: bottom;
	transform:perspective(150px) rotateX(320deg);
	visibility: hidden;
}
.watch:hover #shadow{
	visibility: visible;
	transition-delay: .3s;
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Ben10 Omnitrix Animation

About this Code

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever