Exnrt Logo
  • Home
  • Technology
    • Artificial Intelligence
    • WordPress
  • Programming
    ProgrammingShow More
    Mistral AI Model
    Mistral-7B Instruct Fine-Tuning using Transformers LoRa
    19 1
    Hugging Face Website
    Hugging Face Transformers Pipeline, what can they do?
    15 1
    AI generated images using SDXL-Lightning huggingface
    SDXL-Lightning model using hugging face Transformers
    14 1
    Gemma AI Model
    Finetune Gemma Models with Transformers
    11 1
    HTML Quiz App
    Quiz App Using HTML, CSS, and JavaScript
    9 1
  • Business
    • Ads
    • SEO
  • AI Tools
    • AI Chatbot For Education
    • Ask a Question
    • News Title Generator
  • My Feed
    • My Interests
    • My Saves
    • History
Notification
Sign In
ExnrtExnrtExnrt
Font ResizerAa
  • Artificial Intelligence
  • Technology
  • Business
  • Ads
  • SEO
Search
  • Blog
  • Ads
  • Programming
  • Technology
  • Artificial Intelligence
  • WordPress
  • SEO
  • Business
  • Education

Top Stories

Explore the latest updated news!
Fine Tuning Siglip2 a ViT on Image Classification Task.

Fine Tuning Siglip2 on Image Classification Task

6
AI-Generated-Image-using-Flux-1

How to Fine-Tune Flux.1 Using AI Toolkit

8
microsoft/Phi-3-mini-128k-instruct

How to fine-tune Microsoft/Phi-3-mini-128k-instruct

12

Stay Connected

Find us on socials
248.1k Followers Like
61.1k Followers Follow
165k Subscribers Subscribe
ProgrammingBlog

DNA Animation Using Html & CSS

Ateeq Azam
Last updated: March 17, 2024 10:29 am
By Ateeq Azam Add a Comment 4
Share
DNA Animation Using Html & CSS
DNA Animation Using Html & CSS
SHARE

The “DNA Animation” using HTML and CSS is a web animation that visually simulates the structure of DNA (deoxyribonucleic acid) using HTML and CSS. DNA is a molecule that carries genetic information in living organisms, and its structure is typically depicted as a double helix composed of two long chains of nucleotides.

Table of Content
Key Components of DNA Animation ProjectHtml CodeHTML StructureCSS CodeCSS StylesDNA Animation ContainerKeyframe AnimationDNA Line StylesSummary

Key Components of DNA Animation Project

Here’s a breakdown of the key components in the code:

  1. HTML Structure:
    • The HTML structure contains a <div> with the class “material,” which serves as a container for the DNA animation.
    • Inside this container, there are multiple <div> elements with the class “dna.” Each of these represents one vertical line of the DNA structure.
  2. CSS Styles:
    • The CSS styles define the appearance and animation of the DNA structure.
    • The “dna” class is used to style each vertical line. It gives them a dotted appearance and adds a shadow for a 3D effect.
    • The “::before” and “::after” pseudo-elements are used to create top and bottom dots on each line, representing the nitrogenous bases.
    • The @keyframes animation named “rotate” is defined to continuously rotate the DNA structure around the X-axis, giving it a spinning effect.
    • The animation-delay property is used to stagger the start times of the animations for each vertical line, creating a cascading effect.

When you view this code in a web browser, you’ll see a visually appealing animation that simulates the twisting and rotating of a DNA double helix, with colorful dots representing the base pairs. This kind of animation is often used for educational purposes or as a decorative element on websites related to genetics or biology.

In this animation, the DNA structure is represented as a series of vertical lines (the “dna” class) with two colored dots (representing nitrogenous bases) on each line. The animation rotates the DNA structure continuously to create a dynamic and visually engaging effect.

DNA Animation

Html Code

HTML
<!DOCTYPE html>
<html>
<head>
<title>DNA Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="material">
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
<div class="dna"></div>
</dna>
</body>
</html>

Let’s break down the provided DNA animation Html code step by step with headings for clarity.

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <title>DNA Animation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="material">
    <!-- Multiple "dna" Div Elements -->
  </div>
</body>
</html>

Document Structure

  • <!DOCTYPE html>: Declares the document type as HTML5.
  • <html>: The root element of the HTML document.

Head Section

  • <head>: Contains metadata and links to external resources.
  • <title>: Sets the title of the web page to “DNA Animation.”
  • <link rel="stylesheet" href="style.css">: Links an external CSS file named “style.css” to apply styles to the HTML content.

Body Section

  • <body>: Contains the visible content of the web page.
  • <div class="material">: A container for the DNA animation.

CSS Code

CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: #000d0d;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.material {
position: relative;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
transform: rotateZ(-20deg);
}

@keyframes rotate {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}

.dna {/*line*/
    position: relative;
    width: 1px;
    height: 100px;
    border: 1px dotted #e7e7e7;
    box-shadow: 0 0 15px #e7e7e7;
    background: transparent;
    margin: 0px 10px;
    animation: rotate 3s linear infinite;
}

.dna::before {/*top dot*/
    content: "";
    position: absolute;
    top: -2px;
    left: -5px;
    width: 10px;
    height: 10px;
    background: #ff00ff;
    border-radius: 50%;
    box-shadow: 0 0 15px #ff00ff;
}


.dna::after {/*bottom dot*/
content: '';
position: absolute;
bottom: -2px;
left: -5px;
width: 10px;
height: 10px;
background: #0ff;
border-radius: 50%;
box-shadow: 0 0 12px #0ff;
}

.dna:nth-child(1) {
animation-delay: -0.15s;
}
.dna:nth-child(2) {
animation-delay: -0.3s;
}
.dna:nth-child(3) {
animation-delay: -0.45s;
}
.dna:nth-child(4) {
animation-delay: -0.6s;
}
.dna:nth-child(5) {
animation-delay: -0.75s;
}
.dna:nth-child(6) {
animation-delay: -0.9s;
}
.dna:nth-child(7) {
animation-delay: -1.05s;
}
.dna:nth-child(8) {
    animation-delay: -1.2s;
}
.dna:nth-child(9) {
    animation-delay: -1.35s;
    }
.dna:nth-child(10) {
    animation-delay: -1.5s;
}
.dna:nth-child(11) {
    animation-delay: -1.65s;
}
.dna:nth-child(12) {
    animation-delay: -1.8s;
}
.dna:nth-child(13) {
    animation-delay: -1.95s;
}
.dna:nth-child(14) {
    animation-delay: -2.1s;
}
.dna:nth-child(15) {
    animation-delay: -2.25s;
}
.dna:nth-child(16) {
    animation-delay: -2.4s;
}

Let’s break down the provided DNA animation CSS code step by step with headings for clarity.

Download Full DNA Project

Resource ready for free download! Sign up with your email to get instant access.

CSS Styles

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000d0d;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Reset Styles

  • *: Targets all elements on the page.
  • margin: 0; padding: 0;: Sets margin and padding to zero, resetting default spacing.
  • box-sizing: border-box;: Ensures that padding and border are included in the element’s total width and height.

Body Styles

  • body: Styles applied to the entire page body.
  • background: #000d0d;: Sets the background color to dark blue.
  • display: flex;: Uses flexbox for layout.
  • justify-content: center;: Centers content horizontally.
  • align-items: center;: Centers content vertically.
  • height: 100vh;: Sets the body height to 100% of the viewport height.

DNA Animation Container

.material {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform: rotateZ(-20deg);
}

Container Styles

  • .material: Styles applied to the DNA animation container.
  • position: relative;: Positioning context for child elements.
  • display: flex;: Uses flexbox for layout.
  • justify-content: center;: Centers content horizontally.
  • align-items: center;: Centers content vertically.
  • transform-style: preserve-3d;: Preserves 3D transformations.
  • transform: rotateZ(-20deg);: Rotates the container around the Z-axis by -20 degrees for a tilted effect.

Keyframe Animation

@keyframes rotate {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

Animation Definition

  • @keyframes rotate: Defines a keyframe animation named “rotate.”
  • 0%: Starting keyframe.
    • transform: rotateX(0deg);: No rotation at the beginning.
  • 100%: Ending keyframe.
    • transform: rotateX(360deg);: Rotates 360 degrees around the X-axis at the end.

This animation continuously rotates elements along the X-axis, creating a spinning effect.

DNA Line Styles

.dna {
  /*line*/
  position: relative;
  width: 1px;
  height: 100px;
  border: 1px dotted #e7e7e7;
  box-shadow: 0 0 15px #e7e7e7;
  background: transparent;
  margin: 0px 10px;
  animation: rotate 3s linear infinite;
}

DNA Line Styles

  • .dna: Styles applied to each vertical line representing a part of the DNA structure.
  • position: relative;: Positioning context for pseudo-elements.
  • width: 1px;: Sets a very thin width.
  • height: 100px;: Sets a height of 100 pixels.
  • border: 1px dotted #e7e7e7;: Adds a 1-pixel dotted border.
  • box-shadow: 0 0 15px #e7e7e7;: Adds a shadow for a 3D effect.
  • background: transparent;: Sets a transparent background.
  • margin: 0px 10px;: Adds horizontal margin to space out the lines.
  • animation: rotate 3s linear infinite;: Applies the “rotate” animation to spin the line around the X-axis.

Top Dot (Pseudo-element)

.dna::before {
  /*top dot*/
  content: "";
  position: absolute;
  top: -2px;
  left: -5px;
  width: 10px;
  height: 10px;
  background: #ff00ff;
  border-radius: 50%;
  box-shadow: 0 0 15px #ff00ff;
}
  • .dna::before: Creates the top dot (representing a nitrogenous base) on each DNA line using a pseudo-element.
  • content: "";: Provides an empty content area for the pseudo-element.
  • position: absolute;: Positions the dot absolutely within the parent .dna element.
  • top: -2px;: Shifts the dot 2 pixels above the top edge of the line.
  • left: -5px;: Shifts the dot 5 pixels to the left of the line.
  • width: 10px;: Sets the dot’s width to 10 pixels.
  • height: 10px;: Sets the dot’s height to 10 pixels.
  • background: #ff00ff;: Gives the dot a pink color.
  • border-radius: 50%;: Rounds the dot to create a circular shape.
  • box-shadow: 0 0 15px #ff00ff;: Adds a shadow for a 3D effect.

Bottom Dot (Pseudo-element)

.dna::after {
  /*bottom dot*/
  content: '';
  position: absolute;
  bottom: -2px;
  left: -5px;
  width: 10px;
  height: 10px;
  background: #0ff;
  border-radius: 50%;
  box-shadow: 0 0 12px #0ff;
}
  • .dna::after: Creates the bottom dot (representing another nitrogenous base) on each DNA line using a pseudo-element. The properties are similar to the top dot but with different colors and positions.

Animation Delays

.dna:nth-child(1) {
  animation-delay: -0.15s;
}

.dna:nth

-child(2) {
  animation-delay: -0.3s;
}

/* ... More nth-child rules for animation delays */
  • These rules apply animation delays to individual .dna elements to stagger their rotations and create a cascading effect. Each nth-child rule specifies a unique animation delay for different DNA lines.

Summary

This code creates a visually appealing DNA animation using HTML and CSS. It starts with an HTML structure that includes a container for the animation and links to an external CSS file. The CSS code defines styles for the entire page, the DNA animation container, keyframe animations, DNA lines, and top and bottom dots representing nitrogenous bases. Animation delays are used to create a cascading effect, making the DNA lines appear to rotate in a spinning motion.

Please note that the actual CSS styles for colors and other visual aspects are missing in the provided code, as indicated by comments (/* ... */). These styles should be defined in the linked “style.css” file to complete the visual representation of the DNA animation.

TAGGED:Programming
Share This Article
Facebook Twitter Copy Link Print
What do you think?
Love1
Sad0
Happy0
Sleepy0
Angry0
Leave a comment
Subscribe
Login
Notify of
guest

guest

0 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments

You Might Also Like

Fine Tuning Siglip2 a ViT on Image Classification Task.
Fine Tuning Siglip2 on Image Classification Task
AI-Generated-Image-using-Flux-1
How to Fine-Tune Flux.1 Using AI Toolkit
microsoft/Phi-3-mini-128k-instruct
How to fine-tune Microsoft/Phi-3-mini-128k-instruct
AI Generated: A professional real llama looking like a hacker in a dark lab with light yellow lights
How to Fine-tune Meta Llama-3 8B

Other Posts

Mistral AI Model
Mistral-7B Instruct Fine-Tuning using Transformers LoRa
Artificial Intelligence Blog Programming
WordPress
Intersection of Page Speed, SEO, and User Experience
SEO Blog Technology WordPress
Google AdSense
Google AdSense shifts to per impression payments
Ads Blog
Best Website for free wordpress themes
10 Best WPLocker Alternatives For Free Theme & Plugins
WordPress Blog

Latest Posts

Uncover the Latest stories that related to your interest!
Fine Tuning Siglip2 a ViT on Image Classification Task.
Artificial IntelligenceBlog

Fine Tuning Siglip2 on Image Classification Task

April 14, 2025

At Exnrt.com, we believe in empowering computer science students with the knowledge and skills they need to succeed in their careers. Our goal is to provide accessible and engaging tutorials that help students and professionals develop their skills and advance their careers.

  • Categories:
  • Business
  • Technology
  • Ads
  • SEO

Quick Links

  • Blog
  • Technology
  • Artificial Intelligence
  • Business

About US

  • About Us
  • Contact Us
  • Privacy Policy

Copyright © 2024 All Rights Reserved – Exnrt by ateeq.pk

wpDiscuz
Welcome Back!

Sign in to your account

Register Lost your password?