Doctor Strange is a popular superhero from the Marvel Universe, known for his amazing abilities and mystical powers. In this tutorial, we will show you how to create an amazing Doctor Strange animation using HTML and CSS.
This step-by-step guide will take you through the process of creating a visually stunning animation that will bring your website to life. We will cover how to use HTML and CSS to create the animation’s visual effects and how to customize the animation to fit your website’s design.
By following this tutorial, you will be able to create a unique and engaging Doctor Strange animation that will captivate your audience and keep them coming back for more.
HTML CODE
Doctor Strange Animation
CSS CODE
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: black;
}
.image{
background-image: url(../effect.gif);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 80%;
position: absolute;
top: 23px;
left: 380px;
width: 40%;
animation: bg 1s ease 4s;
animation-fill-mode: backwards;
opacity: .8;
backface-visibility: hidden;
transform: rotate(360deg);
}
.parent{
width: 2px;
height: 300px;
background: #ff841f;
position: absolute;
left: 649px;
top: 150px;
animation: animation2 2s 1s;
transform: rotate(280deg);
opacity: 0;
box-shadow: 0 0 100px #fa9542;
}
.parent2{
width: 300px;
height: 300px;
position: absolute;
left: 505px;
top: 151px;
border: 5px solid #ff841f;
border-radius: 1000px;
animation: animation1 1s ease 2s;
animation-fill-mode: backwards;
box-shadow: 0 0 100px #ff841f;
}
.parent3{
width: 300px;
height: 300px;
position: absolute;
left: 505px;
top: 151px;
border: 5px solid #ff841f;
border-radius: 1000px;
animation: animation3 1s ease 2s;
animation-fill-mode: backwards;
box-shadow: 0 0 100px #ff841f;
transform: scale(1.2);
}
.parent4{
width: 300px;
height: 300px;
position: absolute;
left: 505px;
top: 151px;
border: 5px solid #ff841f;
border-radius: 1000px;
animation: animation4 1s ease 2s;
animation-fill-mode: backwards;
transform: rotate(315deg) scale(1.2);
z-index: -1;
box-shadow: 0 0 20px #ff841f;
}
.parent5{
width: 200px;
height: 200px;
position: absolute;
left: 555px;
top: 201px;
border: 5px solid #ff841f;
border-radius: 1000px;
animation: animation1 1s ease 2s;
animation-fill-mode: backwards;
box-shadow: 0 0 100px #ff841f;
transition: all 1s;
z-index: 10;
}
.parent5:hover{
border: 1px solid #fa95428e;
background: #fa95428e;
box-shadow: 0 0 100px #fa9542;
cursor: pointer;
}
.circles{
display: inline-block;
width: 300px;
height: 300px;
position: relative;
left: 505px;
top: 151px;
transform: rotate(360deg) scale(1.2);
animation: animation5 1s ease-out 4s;
animation-fill-mode: backwards;
}
.c1{
width: 100px;
height: 100px;
position: absolute;
left: 33%;
top: -13%;
border-radius: 1000px;
border: 5px solid #ff841f;
box-shadow: 0 0 20px #ff841f;
transition: all 0.7s;
z-index: 3;
}
.c1:hover,
.c2:hover,
.c3:hover,
.c4:hover,
.c5:hover,
.c6:hover{
transform: scale(1.5);
border: 1px solid #fa95428e;
background: #fa95428e;
box-shadow: 0 0 100px #fa9542;
cursor: pointer;
}
.c2{
width: 100px;
height: 100px;
position: absolute;
left: 77%;
top: 11%;
border: 5px solid #ff841f;
border-radius: 1000px;
box-shadow: 0 0 20px #ff841f;
transition: all 0.7s;
}
.c3{
width: 100px;
height: 100px;
position: absolute;
right: 77%;
top: 11%;
border: 5px solid #ff841f;
border-radius: 1000px;
box-shadow: 0 0 20px #ff841f;
transition: all 0.7s;
}
.c4{
width: 100px;
height: 100px;
position: absolute;
left: 33%;
top: 80%;
border: 5px solid #ff841f;
border-radius: 1000px;
box-shadow: 0 0 20px #ff841f;
transition: all 0.7s;
}
.c5{
width: 100px;
height: 100px;
position: absolute;
left: -7%;
top: 60%;
border: 5px solid #ff841f;
border-radius: 1000px;
box-shadow: 0 0 20px #ff841f;
transition: all 0.7s;
}
.c6{
width: 100px;
height: 100px;
position: absolute;
left: 74%;
top: 60%;
border: 5px solid #ff841f;
border-radius: 1000px;
box-shadow: 0 0 20px #ff841f;
transition: all 0.7s;
}
/*ANIMATION*/
@keyframes bg{
0%{
transform: rotate(-360deg) scale(1.6);
opacity: 0;
}
10%{
opacity: 0.2;
}
100%{
opacity: 0.8;
}
}
@keyframes circles{
100%{
background-image: url(../effect.gif);
background-size: cover;
background-position: center;
filter: blur(1) brightness(80%);
transform: scale(2);
}
}
@keyframes animation5{
0%{
transform: rotate(0) scale(1.2);
opacity: 0;
}
80%{
transform: rotate(370deg) scale(1.2);
}
100%{
transform: rotate(360deg) scale(1.2);
}
}
@keyframes animation4{
0%{
transform: rotate(360deg) scale(1.2);
opacity: 0;
}
100%{
transform: rotate(315deg) scale(1.2);
}
}
@keyframes animation2{
0%{
transform: rotate(0);
height: 0;
opacity: 1;
}
50%{
transform: rotate(0);
height: 300px;
opacity: 1;
}
100%{
transform: rotate(280deg);
height: 300px;
}
}
@keyframes animation1{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes animation3{
0%{
transform: scale(0);
opacity: 0;
}
100%{
transform: scale(1.2);
opacity: 1;
height: 300px;
}
}Conclusion:
In conclusion, creating a Doctor Strange animation using HTML and CSS is a fun and creative way to add some personality and interactivity to your website. By using keywords and headings that are relevant to the topic, this content is optimized for search engines and will attract visitors interested in learning how to create a Doctor Strange animation using HTML and CSS. Follow this step-by-step tutorial to bring your website to life with a visually stunning animation that will captivate your audience.
Download complete code from GITHub Doctor Strange Animation Using HTML & CSS
To Watch More Video as Like these
Just Subscribe My Youtube Channel DarkCoders
and Hit The Bell Icon
