css实现三维dna染色体旋转动画效果代码-html代码-BFW代码库

css实现三维dna染色体旋转动画效果代码

代码语言：html

所属分类：三维

代码描述：css实现三维dna染色体旋转动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
          background: #000;
          height: 100vh;
        	margin:0;
        	display:flex;
        	align-items:center;
        	justify-content:center;
          perspective: 50em;
          overflow: hidden;
        }
        .adn {
          --h: .6em; /* control the size */
        	--s: 7s;   /* control the speed */
        	margin: calc(2*var(--h)) auto;
          aspect-ratio: 7/1;
          height: var(--h);
          animation: r var(--s) linear calc(var(--i)/-10 * var(--s)) infinite;
        }
        .adn i {
          position:absolute;
          inset:calc((1 - 0.577)*50%) calc(var(--h)/-10);
          transform:translateZ(calc(var(--h)/2)) rotateX(180deg);
          background:
            linear-gradient(#0004, #0000, #0004)
            hsl(calc(30 * var(--i)), 100%, 70%);
    .........完整代码请登录后点击上方下载按钮下载查看