Animated Thor Using HTML & CSS With Source Code | CodeWithNinju

codewithninjuby 4 years ago   in Source Code 0 comments
chrome_CORA81vwys

 Animated Thor Using HTML & CSS  With Source Code


chrome_CORA81vwys



  • Source Code Of Animated Thor Are Below  You can Copy Past It OR You can download It Using Link 
  • Link is Given After This Code

  1. Index.html


<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Thor</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="bg"></div>
<br>
<br>
<br>
<br>
<br>
<div class="thor">
<div class="left-wings">
<div class="wing-1"></div>
<div class="wing-2"></div>
<div class="wing-3"></div>
</div>
<div class="right-wings">
<div class="wing-4"></div>
<div class="wing-5"></div>
<div class="wing-6"></div>
</div>
<div class="helmet">
<div class="helmet-detail"></div>
</div>
<div class="head">
<div class="left-eye"></div>
<div class="right-eye"></div>
<div class="mouth"></div>
</div>
<div class="body">
<div class="button-1"></div>
<div class="button-2"></div>
<div class="button-3"></div>
<div class="button-4"></div>
</div>
<div class="hammer-c">
<div class="hammer"></div>
</div>
<div class="left-hand"></div>
<div class="right-hand"></div>
<div class="shadow"></div>
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
* {
padding: 0;
margin: 0;
}
body {
overflow:hidden;
}
.bg {
animation: back infinite alternate 10s ease-in;
background:radial-gradient(ellipse at center, rgba(147,149,191,1) 0%, rgba(40,38,69,1) 100%);
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.thor {
height: 330px;
width: 300px;
position: relative;
margin: 0 auto;
margin-top: 2%;
}
.helmet, .helmet::after{
background: linear-gradient(to bottom, rgba(201, 201, 201, 1) 0%, rgba(158, 158, 158, 1) 100%);
border: 8px solid #343434;
position: absolute;
}
.helmet {
border-radius: 50% 50% 10% 10%/100% 100% 15% 15%;
box-shadow: 15px 2px 1px 1px rgba(0, 0, 0, 0.2) inset, 0px 5px 1px -1px rgba(0, 0, 0, 0.2);
height: 65px;
left: 52px;
top: 40px;
width: 150px;
z-index: 5;
}
.helmet::after {
border-radius: 40% 40% 40% 40%/15% 15% 15% 15%;
box-shadow: 29px 6px 1px -20px rgba(0, 0, 0, 0.2) inset, -4px 4px 1px 1px rgba(0, 0, 0, 0.2);
content: "";
display: block;
height: 85px;
left: 54px;
top: -17px;
width: 27px;
z-index: 6;
}
.right-wings {
transform: scaleX(-1);
position: relative;
top: 0px;
left: -25px;
}
.wing-1, .wing-2, .wing-3, .wing-4, .wing-5, .wing-6 {
background: linear-gradient(to bottom, rgba(196, 194, 196, 1) 0%, rgba(148, 148, 148, 1) 100%);
border: 7px solid #343434;
z-index: 1;
position: absolute;
}
.wing-1::after, .wing-2::after, .wing-3::after, .wing-4::after, .wing-5::after, .wing-6::after {
content: "";
display: block;
background-color: rgba(255, 255, 255, .8);
border-radius: 50%;
}
.wing-1, .wing-4 {
border-radius: 50% 50% 50% 50%/22% 22% 0% 0%;
height: 57px;
left: 50px;
top: 24px;
transform: rotate(-17deg);
width: 17px;
}
.wing-1::after, .wing-4::after {
height: 11px;
margin-left: 2px;
margin-top: 5px;
width: 11px;
}
.wing-2, .wing-5 {
height: 50px;
width: 13px;
top: 46px;
left: 44px;
transform: rotate(-37deg);
border-radius: 50% 50% 50% 50%/22% 22% 0% 0%;
}
.wing-2::after, .wing-5::after {
height: 7px;
width: 7px;
margin-left: 2px;
margin-top: 5px;
}
.wing-3, .wing-6 {
height: 50px;
width: 9px;
top: 63px;
left: 46px;
transform: rotate(-58deg);
border-radius: 50% 50% 50% 50%/22% 22% 0% 0%;
}
.wing-3::after, .wing-6::after {
height: 5px;
width: 5px;
margin-left: 1px;
margin-top: 4px;
}
.helmet-detail {
background-color: rgba(255, 255, 255, .8);
border-radius: 40% 40% 40% 40%/4% 4% 4% 4%;
height: 70px;
left: 76px;
position: relative;
top: 0;
width: 5px;
z-index: 7;
}
.helmet-detail::after {
border-bottom: 5px solid rgba(255, 255, 255, .8);
border-left: 5px solid transparent;
border-radius: 50% 50% 50% 50%/44% 44% 40% 40%;
border-right: 5px solid transparent;
content: "";
display: block;
height: 70px;
left: -15px;
position: relative;
top: 15px;
transform: rotate(-130deg);
width: 70px;
z-index: 7;
}
.head {
border: 8px solid #343434;
height: 100px;
width: 143px;
border-radius: 0 0 30px 40px;
position: absolute;
top: 100px;
left: 56px;
z-index: 2;
background: linear-gradient(to bottom, rgba(250, 250, 75, 1) 0%, rgba(224, 224, 16, 1) 100%);
}
.head::after {
background: linear-gradient(to bottom, rgba(242, 242, 58, 1) 0%, rgba(224, 224, 16, 1) 100%);
content: "";
border-top: 8px solid #343434;
border-left: 8px solid #343434;
border-right: 8px solid #343434;
border-radius: 22px 22px 0px 0px;
display: block;
height: 18px;
width: 60px;
position: absolute;
top: 55px;
left: 35px;
}
.head::before {
background: linear-gradient(to bottom, rgba(240, 189, 147, 1) 0%, rgba(230, 170, 122, 1) 100%);
content: "";
border: 8px solid #343434;
border-radius: 14px 14px 26px 26px;
display: block;
height: 60px;
width: 107px;
position: absolute;
top: 5px;
left: 11px;
}
.left-eye, .right-eye {
height: 15px;
width: 15px;
border-radius: 50%;
position: absolute;
background-color: #353535;
}
.left-eye {
top: 40px;
left: 30px;
}
.right-eye {
top: 40px;
left: 98px;
}
.left-eye::after {
content: "";
height: 6px;
width: 30px;
border-radius: 4px;
display: block;
background-color: #353535;
position: relative;
top: -2px;
left: -8px;
animation: eye-1 infinite alternate 3s ease-in;
}
.right-eye::after {
content: "";
height: 6px;
width: 30px;
border-radius: 4px;
display: block;
background-color: #353535;
position: relative;
top: -2px;
left: -8px;
animation: eye-2 infinite alternate 3s ease-in;
}
.mouth {
height: 17px;
width: 40px;
position: absolute;
left: 47px;
top: 59px;
z-index: 4;
border-bottom: 7px solid #353535;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-radius: 40%;
}
.body {
top: 204px;
left: 70px;
height: 70px;
width: 117px;
position: absolute;
z-index: 1;
border: 9px solid #353535;
background: linear-gradient(to bottom, rgba(245, 52, 58, 1) 0%, rgba(222, 24, 31, 1) 100%);
border-radius: 0px 0px 20px 20px;
z-index: 1;
animation: body infinite alternate 2s ease-in;
}
.body::after {
content: "";
display: block;
top: -9px;
left: 6px;
z-index: 2;
background: linear-gradient(to bottom, rgba(99, 98, 99, 1) 0%, rgba(66, 64, 66, 1) 100%);
border: 9px solid #353535;
height: 80px;
width: 88px;
border-radius: 0px 0px 40% 40%/ 0% 0% 35% 35%;
position: absolute;
box-shadow: 15px -2px 1px 4px rgba(0, 0, 0, 0.3) inset;
}
.hammer {
position: absolute;
height: 120px;
width: 21px;
border-radius: 45% 45% 45% 45%/20% 20% 20% 20%;
border: 7px solid #353535;
top: 146px;
left: 206px;
background-color: #b3b3b3;
z-index: 4;
animation: hammer infinite alternate 1s ease-in;
}
.hammer::after {
border: 7px solid #353535;
content: "";
display: block;
position: absolute;
height: 50px;
width: 83px;
background: linear-gradient(to bottom, rgba(196, 189, 186, 1) 0%, rgba(173, 166, 163, 1) 100%);
top: 3px;
left: -40px;
border-radius: 18% ;
}
.hammer::before {
content: "";
display: block;
position: absolute;
height: 40px;
width: 69px;
top: 15px;
left: -26px;
z-index: 1;
background-color: rgba(255, 255, 255, .7);
border-radius: 18%;
}
.hammer-c{
position: relative;
animation: hammer-c alternate 2s ease-in;
z-index: 3;
}
.left-hand, .right-hand {
height: 40px;
width: 40px;
border-radius: 50%;
border: 7px solid #353535;
position: absolute;
background: linear-gradient(to bottom, rgba(240, 189, 147, 1) 0%, rgba(230, 170, 122, 1) 100%);
box-shadow: 5px -2px 1px 3px rgba(0, 0, 0, 0.2) inset;
z-index: 4;
animation: hands infinite alternate 1s ease-in;
}
.left-hand::after, .right-hand::after {
content: "";
display: block;
height: 20px;
width: 20px;
background-color: rgba(255, 255, 255, .4);
border-radius: 50%;
position: absolute;
left: 16px;
top: 10px;
}
.left-hand {
top: 191px;
left: 40px;
}
.right-hand {
top: 210px;
left: 180px;
}
.button-1, .button-2 {
height: 26px;
width: 26px;
border-radius: 50%;
border: 4px solid #353535;
position: absolute;
background-color: #c1c1c1;
z-index: 4;
}
.button-1 {
top: 8px;
left: 17px;
}
.button-2 {
top: 8px;
left: 66px;
}
.button-1::after, .button-2::after {
content: "";
display: block;
height: 14px;
width: 14px;
background-color: rgba(255, 255, 255, .8);
border-radius: 50%;
position: absolute;
left: 9px;
top: 4px;
}
.button-3, .button-4 {
height: 20px;
width: 20px;
border-radius: 50%;
border: 4px solid #353535;
position: absolute;
background-color: #c1c1c1;
z-index: 4;
}
.button-3 {
top: 45px;
left: 24px;
}
.button-4 {
top: 45px;
left: 64px;
}
.button-3::after, .button-4::after {
content: "";
display: block;
height: 8px;
width: 8px;
background-color: rgba(255, 255, 255, .8);
border-radius: 50%;
position: absolute;
left: 9px;
top: 4px;
}
.shadow {
background-color: rgba(0, 0, 0, .2);
height: 20px;
width: 140px;
position: absolute;
top: 288px;
left: 67px;
border-radius: 50%;
}
@keyframes eye-1{
0% {
transform: translateY(-1px)rotate(13deg);
}
30% {
transform: translateY(0px)rotate(23deg);
}
100% {
transform: translateY(-1px)rotate(23deg);
}
}
@keyframes eye-2{
0% {
transform: translateY(-1px)rotate(-13deg);
}
30% {
transform: translateY(0px)rotate(-23deg);
}
100% {
transform: translateY(-1px)rotate(-23deg);
}
}
@keyframes body{
0% {
transform: translateY(-1px)scale(1.02);
}
100% {
transform: translateY(0px);
}
}
@keyframes hammer{
0% {
transform: translateY(-5px)rotate(30deg);
}
100% {
transform: translateY(0px)rotate(35deg);
}
}
@keyframes hammer-c{
0% {
transform: translatex(1000px);
}
80% {
transform: translatex(1000px);
}
100% {
transform: translatex(0px);
}
}
@keyframes hands{
0% {
transform: translateY(-5px);
}
100% {
transform: translateY(0px);
}
}
@keyframes back{
0% {
filter: hue-rotate(0deg);
}
20% {
filter: hue-rotate(60deg);
}
40% {
filter: hue-rotate(120deg);
}
60% {
filter: hue-rotate(180deg);
}
80% {
filter: hue-rotate(220deg);
}
}
view raw style.css hosted with ❤ by GitHub

Tags:
codewithninju

You may also like:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)
(C) Copyright 2020 CodeWithNinju, All rights reserved.