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%).........完整代码请登录后点击上方下载按钮下载查看