DNA Double Helix

Developer

Size

5,112 Kb

Views

32,384

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,384

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
Iron Man Login Form	7,117 Kb
Animated Atom Logo	5,901 Kb
Trello style subtle rotate for sortable items	2,709 Kb
Shop Talk logo made in CSS	19,368 Kb
80s Retro spinning cube	3,011 Kb
Roll Over Social Buttons	2,811 Kb
Rainbow 3D Text	4,538 Kb
Animated Navicons	3,888 Kb
Shade - Shadow Mixin	9,364 Kb
LunchBreak Sassing	2,885 Kb

Create amazing blog posts 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
CubeTronic	Jurbank	3,716 Kb
Table border-collapse property	Maxds	1,672 Kb
Single element checkbox	Ivijaygupta	1,996 Kb
CSS Google Now	Jackmoran	3,196 Kb
Canvas Orbital Trails v2	Jackrugile	3,421 Kb
Minimelephant	Smashlee	2,507 Kb
React Recipe Box	Krokodill	5,347 Kb
Segments mouse following	Nosir	2,909 Kb
Awesome textarea	Ayoungh	1,977 Kb
Horizontal Navigation with Floats	Gymratpacks	5,403 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!