CSS Arc Reactor tutorial
In this tutorial, we’ll walk you through the process of creating an Arc Reactor using HTML and CSS. Inspired by the iconic Iron Man Arc Reactor, this project involves using CSS animations, keyframes, and box shadows to create a glowing, rotating effect that will impress any web developer or designer.
Step-by-Step Guide to Creating an Arc Reactor with HTML and CSS:
The Arc Reactor is one of the most visually striking symbols from the Iron Man series, and replicating this effect with just HTML and CSS is a fun and educational way to enhance your web development skills.
HTML Structure:
To begin, we’ll create the basic structure of the Arc Reactor using HTML. The Arc Reactor is composed of several concentric circles that represent different layers of the design. These circles are housed within a container and are animated to simulate the pulsing, glowing effect of the real Arc Reactor.
CSS Styling:
Using CSS, we’ll apply styles to each part of the Arc Reactor. The key element here is the border-radius property, which we use to create perfect circles. We’ll also use box-shadow to add a glowing effect to the Arc Reactor’s core.
Next, we apply CSS keyframes to animate the Arc Reactor. The rotation animation will create a smooth 360-degree spin, giving the appearance that the Arc Reactor is powered on and working.
Adding the Glow Effect:
To add a realistic glow, we’ll use multiple layers of box-shadow to make the Arc Reactor look like it’s emitting light. By carefully adjusting the shadow’s blur and color, we can achieve a bright, realistic glowing effect.
Why Build an Arc Reactor with HTML and CSS?
Learning how to create an Arc Reactor with HTML and CSS is a great way to practice using CSS animations, positioning, and styling. It’s an intermediate-level project that challenges your creativity and helps you understand how to manipulate CSS for more complex designs.
Whether you’re a beginner or an experienced developer, this project will help you improve your animation skills and give you a deeper understanding of how to create interactive, animated elements for your websites.
Video of the tutorial:
Source codes:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
.fullpage-wrapper {
width: 100%;
height: 100vh;
background: radial-gradient(#2A3D66, #1D2B53); /* Dark blue gradient */
display: flex;
}
.reactor-container {
width: 300px;
height: 300px;
margin: auto;
border: 1px dashed #E8DCC8; /* Light beige dashed border */
position: relative;
}
.circle {
border-radius: 50%;
}
.abs-center {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.core-inner {
width: 70px;
height: 70px;
border: 5px solid #D4AF37; /* Gold border */
background-color: #FFFAF0; /* Ivory background */
box-shadow: 0px 0px 7px 5px #FAD02E, 0px 0px 10px 10px #FAD02E inset; /* Soft yellow glow */
}
.core-outer {
width: 120px;
height: 120px;
border: 1px solid #FAD02E; /* Yellow border */
background-color: #FFFAF0;
box-shadow: 0px 0px 2px 1px #FAD02E, 0px 0px 10px 5px #FAD02E inset; /* Yellow glow */
}
.core-wrapper {
width: 180px;
height: 180px;
background-color: #342E37; /* Dark greyish-purple */
box-shadow: 0px 0px 5px 4px #FAD02E, 0px 0px 6px 2px #FAD02E inset; /* Yellow glow */
}
.tunnel {
width: 220px;
height: 220px;
background-color: #FFFAF0;
box-shadow: 0px 0px 5px 1px #FAD02E, 0px 0px 5px 4px #FAD02E inset; /* Yellow glow */
}
.coil-container {
position: relative;
width: 100%;
height: 100%;
animation-name: reactor-anim;
animation-duration: 3s;
}
.coil {
position: absolute;
width: 30px;
height: 20px;
top: calc(50% - 110px);
left: calc(50% - 15px);
transform-origin: 15px 110px;
background-color:#342E37; /* Dark greyish-purple */
box-shadow: 0px 0px 5px #FAD02E inset; /* Yellow inner glow */
}
.coil-1 {
transform: rotate(0deg);
}
.coil-2 {
transform: rotate(45deg);
}
.coil-3 {
transform: rotate(90deg);
}
.coil-4 {
transform: rotate(135deg);
}
.coil-5 {
transform: rotate(180deg);
}
.coil-6 {
transform: rotate(225deg);
}
.coil-7 {
transform: rotate(270deg);
}
.coil-8 {
transform: rotate(315deg);
}
@keyframes reactor-anim {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="fullpage-wrapper">
<div class="reactor-container">
<div class="tunnel circle abs-center"></div>
<div class="core-wrapper circle abs-center"></div>
<div class="core-outer circle abs-center"></div>
<div class="core-inner circle abs-center"></div>
<div class="coil-container">
<div class="coil coil-1"></div>
<div class="coil coil-2"></div>
<div class="coil coil-3"></div>
<div class="coil coil-4"></div>
<div class="coil coil-5"></div>
<div class="coil coil-6"></div>
<div class="coil coil-7"></div>
<div class="coil coil-8"></div>
</div>
</div>
</div>
</body>
</html>
