DNA旋轉特效 html+css-有解無憂

效果：

在這里插入圖片描述

實作：

1. 首先講css的var()函式 * ；

定義：

隨著sass，less預編譯的流行，css也隨即推出了變數定義var函式，var()函式，就如同sass和less等預編譯軟體一樣，可以定義變數并且進行對應的使用，

使用：
var(custom-property-name, value)；
custom-property-name 必需，自定義屬性的名稱，必需以 - - 開頭，
value 可選，備用值，在屬性不存在的時候使用，

例子：定義了- -size ：20px

body {
    --size: 20px;
    font-size: var(--size);    // 20px
    padding:var(--size);       // 20px
}

注意：
只有通過在:root定義的欄位，就相當于css中的全域變數，可以在css中任意的樣式中進行使用，
如：

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}
 
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
 
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

2. 定義標簽，每個.line的盒子都定義了var（）函式的屬性 - - h與相應的值，這樣等會寫css能節約大量代碼，

<div class="dna">
        <div class="line" style=" --h: 1;"></div> 
        <div class="line" style=" --h: 2;"></div>
        <div class="line" style=" --h: 3;"></div>
        <div class="line" style=" --h: 4;"></div>
        <div class="line" style=" --h: 5;"></div>
        <div class="line" style=" --h: 6;"></div>
        <div class="line" style=" --h: 7;"></div>
        <div class="line" style=" --h: 8;"></div>
        <div class="line" style=" --h: 9;"></div>
        <div class="line" style=" --h: 10;"></div>
    </div>

3. 定義底層盒子樣式：

 .dna{
            position: relative;
            width: 200px;
            height: 502px;
            transform: rotate(30deg) skew(-20deg);
        }

rotate(30deg) 旋轉30度，
skew(-20deg) 傾斜負20度，

4. 定義DNA每條線，也就是.line的樣式，用絕對定位：

.line{
           position: absolute;
           left: 0;
           top: calc( var(--h) * 50px );
           height: 2px;
           width: 200px;
           background-color: rgb(248, 154, 14);
           box-shadow: 0 0 10px rgb(248, 154, 14),
           0 0 10px rgb(248, 154, 14);
           animation: round 3s linear  calc( var(--h) * 0.2s ) infinite;
           
        }

先說明，calc() 函式 * ：
calc() 函式用于動態計算長度值，
需要注意的是，運算子前后都需要保留一個空格，例如：width: calc(100% - 10px)；
任何長度值都可以使用calc()函式進行計算；
calc()函式支持 “+”, “-”, “*”, “/” 運算；
calc()函式使用標準的數學運算優先級規則；

所以：
top: calc( var(–h) * 50px ); 意思是定位的top大小為每天線的自定義屬性 - -h 乘以 50 px ，因為每條線的 - -h 值不一樣，所以就快速得到了全部線的top值，

box-shadow: 0 0 10px rgb(248, 154, 14),
0 0 10px rgb(248, 154, 14); 陰影，寫兩行是為了陰影更亮，

animation: round 3s linear calc( var(–h) * 0.2s ) infinite; 定義影片，round是影片名字，3s是影片時長，linear 影片運動曲線為勻速，calc( var(–h) * 0.2s ) 是影片延遲播放，通過calc函式計算每條線延遲多少秒再播放，infinite是影片重復播放，

5. 定義每條線左邊和右邊的圓，通過雙偽類實作：

.line::after,.line::before{
            content: '';
            position: absolute;
            top: -20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;

        }
        .line::after{        
            left: -20px;
            background-color: rgb(0, 26, 255);
            box-shadow:  0 0 15px rgb(0, 26, 255),
                       0 0 20px rgb(0, 26, 255) ;
        }
        .line::before{
            right: -20px;
            background-color: rgb(61, 248, 3);
            box-shadow: 0 0 15px rgb(61, 248, 3),
                       0 0 20px rgb(61, 248, 3);
        }

6. 定義影片

 @keyframes round{
        
            100%{
                transform: rotateY(360deg);

            }
        }

transform: rotateY(360deg); 旋轉360度，

完整原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(0, 0, 0);
        }
        .dna{
            position: relative;
            width: 200px;
            height: 502px;
            transform: rotate(30deg) skew(-20deg);
             

        }
        .line{
           position: absolute;
           left: 0;
           top: calc( var(--h) * 50px );
           height: 2px;
           width: 200px;
           background-color: rgb(248, 154, 14);
           box-shadow: 0 0 10px rgb(248, 154, 14),
           0 0 10px rgb(248, 154, 14);
           animation: round 3s linear  calc( var(--h) * 0.2s ) infinite;
           
        }
        @keyframes round{
        
            100%{
                transform: rotateY(360deg);

            }
        }
        .line::after,.line::before{
            content: '';
            position: absolute;
            top: -20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;

        }
        .line::after{        
            left: -20px;
            background-color: rgb(0, 26, 255);
            box-shadow:  0 0 15px rgb(0, 26, 255),
                       0 0 20px rgb(0, 26, 255) ;
        }
        .line::before{
            right: -20px;
            background-color: rgb(61, 248, 3);
            box-shadow: 0 0 15px rgb(61, 248, 3),
                       0 0 20px rgb(61, 248, 3);
        }

    </style>
</head>
<body>
    <div class="dna">
        <div class="line" style=" --h: 1;"></div> 
        <div class="line" style=" --h: 2;"></div>
        <div class="line" style=" --h: 3;"></div>
        <div class="line" style=" --h: 4;"></div>
        <div class="line" style=" --h: 5;"></div>
        <div class="line" style=" --h: 6;"></div>
        <div class="line" style=" --h: 7;"></div>
        <div class="line" style=" --h: 8;"></div>
        <div class="line" style=" --h: 9;"></div>
        <div class="line" style=" --h: 10;"></div>
    </div>
</body>
</html>

總結：

這個效果并不難，但是涉及的知識點還是挺全面的，所以拿來練習是很不錯的~

其它文章~：
氣泡浮動背景特效 html+css
簡約時鐘特效 html+css+js
賽博朋克風格按鈕 html+css
回應式卡片懸停效果 html+css
水波加載影片 html+css
導航欄滾動漸變效果 html+css+js
書本翻頁 html+css
3D立體相冊 html+css
炫彩流光按鈕 html+css
記一些css屬性總結（一）
Sass總結筆記
…等等

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258194.html

標籤：其他

上一篇：搭建VUE專案框架(2) 創建專案

下一篇：用Javascript實作固定側邊欄