css实现dna旋转动画效果代码-html代码-BFW代码库

css实现dna旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现dna旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
:root{
	--rotate: -26deg;

	/* to make it responsive */
	--unit: 1vmin;
	--zoom: 160;
	--workspace-min: 768; /* device screen height = 768px */
	--upx: calc(var(--zoom) * (var(--unit) / var(--workspace-min))); /* upx = units per pixel */

	/* DNA Helix loop */
	--animation-speed: 1;
	--helix-duration: 0.5s;
	--helix-iteration-factor: 0.05s;
	
	/* DNA model */
	--dna-max-height: calc(140 * var(--upx));
	--dna-nitrogenous-base-width: calc(6 * var(--upx));
	--dna-nitrogenous-base-margin: calc(8 * var(--upx));
	--dna-sugar-diameter: calc(15 * var(--upx));
	--dna-sugar-border-size: calc(6 * var(--upx));

	/* colors */
	--color-background: #151515;
	--color-sugar: #f2f1d5;
	--color-A: #ffba36;
	--color-T: #26f826;
	--color-C: #439AD9;
	--color-G: #E96451;
}

/* rotate the dna container for smart mobile devices */
@media (orientation: portrait){
	:root{
		--rotate: -58deg;
	}
}

/* to make things look pretty */
html, body{
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	display: block;
}

body{
	background: var(--color-background);
	overflow: auto;
}

html{
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.4) rgba(0,0,0,0);
}

/* align the DNA to middle */
.wrapper{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(var(--rotate));
	transform-origin: 50% 50%;
}

/* DNA is a flex container with n-double helix */
.dna{
	display: flex;
	align-items: center;
	position: relative;
	height: var(--dna-max-height);
}

/* helix (nitrogenous base) */
.dna > div{
	font-size: 0;
	position: relative;
	width: var(--dna-nitrogenous-base-width);
	height: 0;
	background: linear-gradient(0deg, var(--color-G) 50%, var(--color-C) 50%);
	display: inline-block;
	margin: 0 var(--dna-nitrogenous-base-margin);
	animation: 
		double-helix 
		ease 
		calc(var(--helix-duration) / var(--animation-speed)) 
		calc((var(--i) * var(--helix-iteration-factor)) / var(--animation-speed)) 
		alternate 
		infinite;
}

.dna > div:nth-child(2n.........完整代码请登录后点击上方下载按钮下载查看