国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端每日實戰:89# 視頻演示如何用 CSS 和 D3 創作旋臂粒子動畫

call_me_R / 760人閱讀

摘要:引入庫用為的和變量賦值用創建粒子元素用為粒子元素的變量賦值刪除掉中的粒子元素,以及用聲明的變量。最后,調整每圈的粒子數和圈數,形成旋臂效果大功告成

效果預覽

按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。

https://codepen.io/comehope/pen/xJrOqd

可交互視頻

此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。

請用 chrome, safari, edge 打開觀看。

https://scrimba.com/p/pEgDAM/cr6Vetm

源代碼下載

每日前端實戰系列的全部源代碼請從 github 下載:

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom,容器中包含 6 個 內含

元素,每個
元素代表 1 個粒子:

居中顯示:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

定義容器尺寸:

.container {
    width: 70vmin;
    height: 70vmin;
}

在容器中定位

,并在
中用 畫出粒子:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.container div {
    position: absolute;
    width: 10vmin;
    height: 10vmin;
}

.container div span {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    background-color: limegreen;
    transform: translateX(300%);
}

用變量定義粒子的旋轉角度,其中 --particles-per-circle 每圈的粒子數,因為每圈有 3 個粒子,所以圈中有 3 個位置,每個位置有 2 個粒子重疊在一起,此時看起來是只有 3 個粒子的樣子:

.container {
    --particles-per-circle: 3;
}

.container div {
    transform: rotate(calc(var(--n) / var(--particles-per-circle) * -360deg));
}

.container div:nth-child(1) {
    --n: 1;
}

.container div:nth-child(2) {
    --n: 2;
}

.container div:nth-child(3) {
    --n: 3;
}

.container div:nth-child(4) {
    --n: 4;
}

.container div:nth-child(5) {
    --n: 5;
}

.container div:nth-child(6) {
    --n: 6;
}

定義粒子從中心向外側的運動效果:

.container div span {
    animation: move 2s linear infinite;
}

@keyframes move {
    from {
        transform: translateX(0) scale(0);
    }

    70% {
        transform: translateX(210%) scale(0.55);
    }

    to {
        transform: translateX(300%) scale(0);
    }
}

再增加運動時讓粒子變色的效果,沿色相環取了 10 個顏色:

.container div span {
    animation: 
        move 2s linear infinite,
        change-color 2s linear infinite;
}

@keyframes change-color {
    0%, 100% {
        background-color: hsl(calc(0 / 100 * 360deg), 80%, 55%);
    }

    10% {
        background-color: hsl(calc(10 / 100 * 360deg), 80%, 55%);
    }

    20% {
        background-color: hsl(calc(20 / 100 * 360deg), 80%, 55%);
    }

    30% {
        background-color: hsl(calc(30 / 100 * 360deg), 80%, 55%);
    }

    40% {
        background-color: hsl(calc(40 / 100 * 360deg), 80%, 55%);
    }

    50% {
        background-color: hsl(calc(50 / 100 * 360deg), 80%, 55%);
    }

    60% {
        background-color: hsl(calc(60 / 100 * 360deg), 80%, 55%);
    }

    70% {
        background-color: hsl(calc(70 / 100 * 360deg), 80%, 55%);
    }

    80% {
        background-color: hsl(calc(80 / 100 * 360deg), 80%, 55%);
    }

    90% {
        background-color: hsl(calc(90 / 100 * 360deg), 80%, 55%);
    }
}

用變量設置動畫延時,這時可以看到 6 個粒子陸續出現了。其中 --circles 表示圈數;--particles 表示粒子數,它等于每圈的粒子數與圈數的積:

.container {
    --circles: 2;
    --particles: calc(var(--particles-per-circle) * var(--circles));
}

.container div span {
    animation-delay: calc(var(--n) / var(--particles) * -2s);
}

接下來用 d3 來批量創建粒子。
引入 d3 庫:

用 d3 為 css 的 --particles-per-circle 和 --circles 變量賦值:

const PARTICLES_PER_CIRCLE = 3;
const CIRCLES = 2;

d3.select(".container")
    .style("--particles-per-circle", PARTICLES_PER_CIRCLE)
    .style("--circles", CIRCLES);

用 d3 創建粒子 dom 元素:

const COUNT_OF_PARTICLES = PARTICLES_PER_CIRCLE * CIRCLES;

d3.select(".container")
    .style("--particles-per-circle", PARTICLES_PER_CIRCLE)
    .style("--circles", CIRCLES)
    .selectAll("div")
    .data(d3.range(COUNT_OF_PARTICLES))
    .enter()
    .append("div")
    .append("span");

用 d3 為粒子元素的 --n 變量賦值:

d3.select(".container")
    .style("--particles-per-circle", PARTICLES_PER_CIRCLE)
    .style("--circles", CIRCLES)
    .selectAll("div")
    .data(d3.range(COUNT_OF_PARTICLES))
    .enter()
    .append("div")
    .style("--n", (d) => d + 1)
    .append("span");

刪除掉 dom 中的粒子元素,以及用 css 聲明的變量。

最后,調整每圈的粒子數和圈數,形成旋臂效果:

const PARTICLES_PER_CIRCLE = 14;
const CIRCLES = 4;

大功告成!

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113542.html

相關文章

  • 前端每日實戰 2018 年 7 月份項目匯總(共 29 個項目)

    摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...

    ghnor 評論0 收藏0
  • 前端每日實戰 2018 年 7 月份項目匯總(共 29 個項目)

    摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...

    avwu 評論0 收藏0
  • 前端每日實戰:139# 視頻演示何用 CSS D3 創作光斑粒子交相輝映的動畫

    摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbheOE?w=400&h=305); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comehop...

    zorro 評論0 收藏0

發表評論

0條評論

call_me_R

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<