DNA Double Helix

Developer

Size

5,112 Kb

Views

32,368

DNA Double Helix Previews
DNA Double Helix HTML Codes
DNA Double Helix CSS Codes

How do I make an dna double helix?

Created a lighting effect by changing the opacity when the LI are perpendicular to the monitor. What is a dna double helix? How do you make a dna double helix? This script and codes were developed by Hugo DarbyBrown on 14 June 2022, Tuesday.

DNA Double Helix Previews

DNA Double Helix - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>DNA Double Helix</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { background-color: black; font-size: 7px;
}
ul { transform: rotateZ(10deg); list-style: none; transform-style: preserve-3d;
}
li { animation: spin 12s linear infinite; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiNjMDM5MmIiLz48c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iIzM0OThkYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(46%, #c0392b), color-stop(47%, #3498db)); background-image: -moz-linear-gradient(left, #c0392b 46%, #3498db 47%); background-image: -webkit-linear-gradient(left, #c0392b 46%, #3498db 47%); background-image: linear-gradient(to right, #c0392b 46%, #3498db 47%); box-shadow: -1.5rem 0 0 #c0392b, 1.5rem 0 0 #3498db; border-radius: 1rem; height: 1rem; margin: 1rem auto; position: relative; width: 25rem;
}
li:before, li:after { background: #3498db; border-radius: 50%; content: ''; height: 2rem; position: absolute; top: -0.5rem; width: 2rem;
}
li:before { background: #c0392b; left: -1rem;
}
li:after { right: -1rem;
}
li:nth-child(0) { animation-delay: 0s;
}
li:nth-child(1) { animation-delay: -0.2s;
}
li:nth-child(2) { animation-delay: -0.4s;
}
li:nth-child(3) { animation-delay: -0.6s;
}
li:nth-child(4) { animation-delay: -0.8s;
}
li:nth-child(5) { animation-delay: -1s;
}
li:nth-child(6) { animation-delay: -1.2s;
}
li:nth-child(7) { animation-delay: -1.4s;
}
li:nth-child(8) { animation-delay: -1.6s;
}
li:nth-child(9) { animation-delay: -1.8s;
}
li:nth-child(10) { animation-delay: -2s;
}
li:nth-child(11) { animation-delay: -2.2s;
}
li:nth-child(12) { animation-delay: -2.4s;
}
li:nth-child(13) { animation-delay: -2.6s;
}
li:nth-child(14) { animation-delay: -2.8s;
}
li:nth-child(15) { animation-delay: -3s;
}
li:nth-child(16) { animation-delay: -3.2s;
}
li:nth-child(17) { animation-delay: -3.4s;
}
li:nth-child(18) { animation-delay: -3.6s;
}
li:nth-child(19) { animation-delay: -3.8s;
}
li:nth-child(20) { animation-delay: -4s;
}
li:nth-child(21) { animation-delay: -4.2s;
}
li:nth-child(22) { animation-delay: -4.4s;
}
li:nth-child(23) { animation-delay: -4.6s;
}
li:nth-child(24) { animation-delay: -4.8s;
}
li:nth-child(25) { animation-delay: -5s;
}
li:nth-child(26) { animation-delay: -5.2s;
}
li:nth-child(27) { animation-delay: -5.4s;
}
li:nth-child(28) { animation-delay: -5.6s;
}
li:nth-child(29) { animation-delay: -5.8s;
}
li:nth-child(30) { animation-delay: -6s;
}
li:nth-child(31) { animation-delay: -6.2s;
}
li:nth-child(32) { animation-delay: -6.4s;
}
li:nth-child(33) { animation-delay: -6.6s;
}
li:nth-child(34) { animation-delay: -6.8s;
}
li:nth-child(35) { animation-delay: -7s;
}
li:nth-child(36) { animation-delay: -7.2s;
}
li:nth-child(37) { animation-delay: -7.4s;
}
li:nth-child(38) { animation-delay: -7.6s;
}
li:nth-child(39) { animation-delay: -7.8s;
}
li:nth-child(40) { animation-delay: -8s;
}
li:nth-child(41) { animation-delay: -8.2s;
}
li:nth-child(42) { animation-delay: -8.4s;
}
li:nth-child(43) { animation-delay: -8.6s;
}
li:nth-child(44) { animation-delay: -8.8s;
}
li:nth-child(45) { animation-delay: -9s;
}
li:nth-child(46) { animation-delay: -9.2s;
}
li:nth-child(47) { animation-delay: -9.4s;
}
li:nth-child(48) { animation-delay: -9.6s;
}
li:nth-child(49) { animation-delay: -9.8s;
}
li:nth-child(50) { animation-delay: -10s;
}
li:nth-child(51) { animation-delay: -10.2s;
}
li:nth-child(52) { animation-delay: -10.4s;
}
li:nth-child(53) { animation-delay: -10.6s;
}
li:nth-child(54) { animation-delay: -10.8s;
}
li:nth-child(55) { animation-delay: -11s;
}
li:nth-child(56) { animation-delay: -11.2s;
}
li:nth-child(57) { animation-delay: -11.4s;
}
li:nth-child(58) { animation-delay: -11.6s;
}
li:nth-child(59) { animation-delay: -11.8s;
}
li:nth-child(60) { animation-delay: -12s;
}
li:nth-child(61) { animation-delay: -12.2s;
}
li:nth-child(62) { animation-delay: -12.4s;
}
li:nth-child(63) { animation-delay: -12.6s;
}
li:nth-child(64) { animation-delay: -12.8s;
}
li:nth-child(65) { animation-delay: -13s;
}
li:nth-child(66) { animation-delay: -13.2s;
}
li:nth-child(67) { animation-delay: -13.4s;
}
li:nth-child(68) { animation-delay: -13.6s;
}
li:nth-child(69) { animation-delay: -13.8s;
}
li:nth-child(70) { animation-delay: -14s;
}
li:nth-child(71) { animation-delay: -14.2s;
}
li:nth-child(72) { animation-delay: -14.4s;
}
li:nth-child(73) { animation-delay: -14.6s;
}
li:nth-child(74) { animation-delay: -14.8s;
}
li:nth-child(75) { animation-delay: -15s;
}
li:nth-child(76) { animation-delay: -15.2s;
}
li:nth-child(77) { animation-delay: -15.4s;
}
li:nth-child(78) { animation-delay: -15.6s;
}
li:nth-child(79) { animation-delay: -15.8s;
}
li:nth-child(80) { animation-delay: -16s;
}
li:nth-child(81) { animation-delay: -16.2s;
}
li:nth-child(82) { animation-delay: -16.4s;
}
li:nth-child(83) { animation-delay: -16.6s;
}
li:nth-child(84) { animation-delay: -16.8s;
}
li:nth-child(85) { animation-delay: -17s;
}
li:nth-child(86) { animation-delay: -17.2s;
}
li:nth-child(87) { animation-delay: -17.4s;
}
li:nth-child(88) { animation-delay: -17.6s;
}
li:nth-child(89) { animation-delay: -17.8s;
}
li:nth-child(90) { animation-delay: -18s;
}
li:nth-child(91) { animation-delay: -18.2s;
}
li:nth-child(92) { animation-delay: -18.4s;
}
li:nth-child(93) { animation-delay: -18.6s;
}
li:nth-child(94) { animation-delay: -18.8s;
}
li:nth-child(95) { animation-delay: -19s;
}
li:nth-child(96) { animation-delay: -19.2s;
}
li:nth-child(97) { animation-delay: -19.4s;
}
li:nth-child(98) { animation-delay: -19.6s;
}
li:nth-child(99) { animation-delay: -19.8s;
}
li:nth-child(100) { animation-delay: -20s;
}
@keyframes spin { 0% { transform: rotateY(0deg); opacity: 1; } 25% { opacity: 0.6; } 50% { opacity: 1; } 75% { opacity: 0.6; } 100% { opacity: 1; transform: rotateY(360deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

DNA Double Helix - Script Codes CSS Codes

html { background-color: black; font-size: 7px;
}
ul { transform: rotateZ(10deg); list-style: none; transform-style: preserve-3d;
}
li { animation: spin 12s linear infinite; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiNjMDM5MmIiLz48c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iIzM0OThkYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(46%, #c0392b), color-stop(47%, #3498db)); background-image: -moz-linear-gradient(left, #c0392b 46%, #3498db 47%); background-image: -webkit-linear-gradient(left, #c0392b 46%, #3498db 47%); background-image: linear-gradient(to right, #c0392b 46%, #3498db 47%); box-shadow: -1.5rem 0 0 #c0392b, 1.5rem 0 0 #3498db; border-radius: 1rem; height: 1rem; margin: 1rem auto; position: relative; width: 25rem;
}
li:before, li:after { background: #3498db; border-radius: 50%; content: ''; height: 2rem; position: absolute; top: -0.5rem; width: 2rem;
}
li:before { background: #c0392b; left: -1rem;
}
li:after { right: -1rem;
}
li:nth-child(0) { animation-delay: 0s;
}
li:nth-child(1) { animation-delay: -0.2s;
}
li:nth-child(2) { animation-delay: -0.4s;
}
li:nth-child(3) { animation-delay: -0.6s;
}
li:nth-child(4) { animation-delay: -0.8s;
}
li:nth-child(5) { animation-delay: -1s;
}
li:nth-child(6) { animation-delay: -1.2s;
}
li:nth-child(7) { animation-delay: -1.4s;
}
li:nth-child(8) { animation-delay: -1.6s;
}
li:nth-child(9) { animation-delay: -1.8s;
}
li:nth-child(10) { animation-delay: -2s;
}
li:nth-child(11) { animation-delay: -2.2s;
}
li:nth-child(12) { animation-delay: -2.4s;
}
li:nth-child(13) { animation-delay: -2.6s;
}
li:nth-child(14) { animation-delay: -2.8s;
}
li:nth-child(15) { animation-delay: -3s;
}
li:nth-child(16) { animation-delay: -3.2s;
}
li:nth-child(17) { animation-delay: -3.4s;
}
li:nth-child(18) { animation-delay: -3.6s;
}
li:nth-child(19) { animation-delay: -3.8s;
}
li:nth-child(20) { animation-delay: -4s;
}
li:nth-child(21) { animation-delay: -4.2s;
}
li:nth-child(22) { animation-delay: -4.4s;
}
li:nth-child(23) { animation-delay: -4.6s;
}
li:nth-child(24) { animation-delay: -4.8s;
}
li:nth-child(25) { animation-delay: -5s;
}
li:nth-child(26) { animation-delay: -5.2s;
}
li:nth-child(27) { animation-delay: -5.4s;
}
li:nth-child(28) { animation-delay: -5.6s;
}
li:nth-child(29) { animation-delay: -5.8s;
}
li:nth-child(30) { animation-delay: -6s;
}
li:nth-child(31) { animation-delay: -6.2s;
}
li:nth-child(32) { animation-delay: -6.4s;
}
li:nth-child(33) { animation-delay: -6.6s;
}
li:nth-child(34) { animation-delay: -6.8s;
}
li:nth-child(35) { animation-delay: -7s;
}
li:nth-child(36) { animation-delay: -7.2s;
}
li:nth-child(37) { animation-delay: -7.4s;
}
li:nth-child(38) { animation-delay: -7.6s;
}
li:nth-child(39) { animation-delay: -7.8s;
}
li:nth-child(40) { animation-delay: -8s;
}
li:nth-child(41) { animation-delay: -8.2s;
}
li:nth-child(42) { animation-delay: -8.4s;
}
li:nth-child(43) { animation-delay: -8.6s;
}
li:nth-child(44) { animation-delay: -8.8s;
}
li:nth-child(45) { animation-delay: -9s;
}
li:nth-child(46) { animation-delay: -9.2s;
}
li:nth-child(47) { animation-delay: -9.4s;
}
li:nth-child(48) { animation-delay: -9.6s;
}
li:nth-child(49) { animation-delay: -9.8s;
}
li:nth-child(50) { animation-delay: -10s;
}
li:nth-child(51) { animation-delay: -10.2s;
}
li:nth-child(52) { animation-delay: -10.4s;
}
li:nth-child(53) { animation-delay: -10.6s;
}
li:nth-child(54) { animation-delay: -10.8s;
}
li:nth-child(55) { animation-delay: -11s;
}
li:nth-child(56) { animation-delay: -11.2s;
}
li:nth-child(57) { animation-delay: -11.4s;
}
li:nth-child(58) { animation-delay: -11.6s;
}
li:nth-child(59) { animation-delay: -11.8s;
}
li:nth-child(60) { animation-delay: -12s;
}
li:nth-child(61) { animation-delay: -12.2s;
}
li:nth-child(62) { animation-delay: -12.4s;
}
li:nth-child(63) { animation-delay: -12.6s;
}
li:nth-child(64) { animation-delay: -12.8s;
}
li:nth-child(65) { animation-delay: -13s;
}
li:nth-child(66) { animation-delay: -13.2s;
}
li:nth-child(67) { animation-delay: -13.4s;
}
li:nth-child(68) { animation-delay: -13.6s;
}
li:nth-child(69) { animation-delay: -13.8s;
}
li:nth-child(70) { animation-delay: -14s;
}
li:nth-child(71) { animation-delay: -14.2s;
}
li:nth-child(72) { animation-delay: -14.4s;
}
li:nth-child(73) { animation-delay: -14.6s;
}
li:nth-child(74) { animation-delay: -14.8s;
}
li:nth-child(75) { animation-delay: -15s;
}
li:nth-child(76) { animation-delay: -15.2s;
}
li:nth-child(77) { animation-delay: -15.4s;
}
li:nth-child(78) { animation-delay: -15.6s;
}
li:nth-child(79) { animation-delay: -15.8s;
}
li:nth-child(80) { animation-delay: -16s;
}
li:nth-child(81) { animation-delay: -16.2s;
}
li:nth-child(82) { animation-delay: -16.4s;
}
li:nth-child(83) { animation-delay: -16.6s;
}
li:nth-child(84) { animation-delay: -16.8s;
}
li:nth-child(85) { animation-delay: -17s;
}
li:nth-child(86) { animation-delay: -17.2s;
}
li:nth-child(87) { animation-delay: -17.4s;
}
li:nth-child(88) { animation-delay: -17.6s;
}
li:nth-child(89) { animation-delay: -17.8s;
}
li:nth-child(90) { animation-delay: -18s;
}
li:nth-child(91) { animation-delay: -18.2s;
}
li:nth-child(92) { animation-delay: -18.4s;
}
li:nth-child(93) { animation-delay: -18.6s;
}
li:nth-child(94) { animation-delay: -18.8s;
}
li:nth-child(95) { animation-delay: -19s;
}
li:nth-child(96) { animation-delay: -19.2s;
}
li:nth-child(97) { animation-delay: -19.4s;
}
li:nth-child(98) { animation-delay: -19.6s;
}
li:nth-child(99) { animation-delay: -19.8s;
}
li:nth-child(100) { animation-delay: -20s;
}
@keyframes spin { 0% { transform: rotateY(0deg); opacity: 1; } 25% { opacity: 0.6; } 50% { opacity: 1; } 75% { opacity: 0.6; } 100% { opacity: 1; transform: rotateY(360deg); }
}

Home Page	Home
Developer	Hugo DarbyBrown
Username	hugo
Uploaded	June 14, 2022
Rating	4
Size	5,112 Kb
Views	32,368

Do you need developer help for DNA Double Helix?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hugo DarbyBrown (hugo) Script Codes

Name	Size
YAUI v2	11,912 Kb
Roll Over Social Buttons	2,811 Kb
Iron Man Login Form	7,117 Kb
Concept mobile navigation	4,141 Kb
SCSS version of Meta Fizzy	13,492 Kb
Shop Talk logo made in CSS	19,368 Kb
Greyscale Magnifying glass effect	2,590 Kb
Social-Media Card	6,177 Kb
Slide Icon Menu	4,910 Kb
Animated Atom Logo	5,901 Kb

Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Day 1 - Portfolio	Chpecson	3,532 Kb
Smoke Shader - Frame Buffer	Omarshe7ta	2,672 Kb
SCSS Simple Animated Drop-In	Danwarfel	2,175 Kb
A Pen by Kenny Mark	Kennymark	5,574 Kb
SVG Text Masking	JMChristensen	2,141 Kb
Dice	Fraina	5,026 Kb
Awesome Full Page Menu Nav	Ey_intuitive	4,194 Kb
CSS Bot Confusion	Jpod	3,456 Kb
E-mail Template	SoloMDFK	4,871 Kb
Simple content swap	Snografx	1,859 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!