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

資訊專(zhuān)欄INFORMATION COLUMN

前端每日實(shí)戰(zhàn):121# 視頻演示如何用 CSS 和 D3 創(chuàng)作一個(gè)小魚(yú)游動(dòng)的交互動(dòng)畫(huà)

wangjuntytl / 716人閱讀

摘要:效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。引入庫(kù)刪除掉中的元素和文件中的變量聲明代碼。創(chuàng)建一個(gè)函數(shù),用于生成一條魚(yú)。

效果預(yù)覽

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁(yè)面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。

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

可交互視頻

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

請(qǐng)用 chrome, safari, edge 打開(kāi)觀看。

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

源代碼下載

每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載:

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

代碼解讀

定義 dom,容器中包含的子元素分別代表魚(yú)的身體、眼睛、背鰭和尾巴:

設(shè)置頁(yè)面樣式為全屏且沒(méi)有滾動(dòng)條:

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: #222;
    overflow: hidden;
}

定義魚(yú)的容器尺寸,--r 是一個(gè)基本尺寸單位,后續(xù)所有尺寸都是基于它計(jì)算的:

.fish {
    position: absolute;
    --r: 15vw;
    width: calc(var(--r) + var(--r) / 3);
    height: calc(var(--r) * 2);
    left: 50%;
    top: 100px;
}

畫(huà)出魚(yú)的身體,同時(shí)把魚(yú)的顏色聲明到父類(lèi)中,因?yàn)橄旅孢€會(huì)用到這個(gè)顏色:

.fish {
    color: hsl(0, 50%, 50%);
}

.fish .body {
    position: absolute;
    border: var(--r) solid transparent;
    border-right-color: currentColor;
    border-left-style: none;
}

畫(huà)出魚(yú)的眼睛:

.fish .eye {
    position: absolute;
    --r1: calc(var(--r) / 4);
    width: var(--r1);
    height: var(--r1);
    background-color: #111;
    border-radius: 50%;
    top: 35%;
    left: 30%;
}

畫(huà)出魚(yú)的背鰭:

.fish .fin {
    position: absolute;
    --r2: calc(var(--r) / 2);
    border-bottom: var(--r2) solid;
    border-left: var(--r2) solid transparent;
    filter: brightness(2.5);
    left: calc(var(--r) - var(--r2));
}

畫(huà)出魚(yú)的尾巴:

.fish .tail {
    position: absolute;
    --r3: calc(var(--r) / 3);
    border: var(--r3) solid transparent;
    border-right-color: currentColor;
    border-left-style: none;
    right: 0;
    top: calc(var(--r) - var(--r3));
}

增加讓魚(yú)游動(dòng)的動(dòng)畫(huà)效果,不是循環(huán)執(zhí)行,而是只執(zhí)行一次:

.fish {
    right: calc(var(--r) * -1);
    animation: run 3s linear forwards;
}

@keyframes run {
    to {
        right: 100%;
    }
}

再增加魚(yú)游動(dòng)時(shí)搖擺的動(dòng)畫(huà)效果:

.fish {
    animation: 
        run 3s linear forwards,
        shake 0.3s linear infinite;
}

@keyframes shake {
    50% {
        transform: rotateY(-30deg);
    }

    100% {
        transform: rotateY(30deg);
    }
}

接下來(lái)設(shè)置一些變量,以便創(chuàng)建不同樣子的魚(yú):

魚(yú)的大小的變量 --size,數(shù)值越大尺寸越大:

.fish {
    --size: 5;
    --r: calc(var(--size) * 1vw);
}

魚(yú)的顏色變量 --color,表示色相環(huán)的角度:

.fish {
    --color: 0;
    color: hsl(var(--color), 50%, 50%);
}

魚(yú)從右側(cè)游到左側(cè)的時(shí)長(zhǎng),時(shí)長(zhǎng)越短游得越快:

.fish {
    --duration: 3;
    animation: 
        run calc(var(--duration) * 1s) linear forwards,
        shake 0.3s linear infinite;
}

魚(yú)出現(xiàn)的高度,數(shù)據(jù)越大越靠近頁(yè)面下部:

.fish {
    --top: 100;
    top: calc(var(--top) * 1px);
}

接下來(lái)用 d3 來(lái)批量處理 dom 元素和 css 變量。
引入 d3 庫(kù):

刪除掉 html 中的 .fish 元素和 css 文件中的變量聲明代碼。創(chuàng)建一個(gè)函數(shù),用于生成一條魚(yú)。css 變量的值均為隨機(jī)生成,--size 的取值范圍是 5 ~ 8,--color 的取值范圍是 -60 ~ 15,--duration 的取值范圍是 3 ~ 6,--top 的取值范圍是 100 ~ 300:

function buildFish() {
    let fish = d3.select("body")
        .append("div")
        .attr("class", "fish")
        .style("--size", d3.randomUniform(5, 8)())
        .style("--color", d3.randomUniform(-60, 15)())
        .style("--duration", d3.randomUniform(3, 6)())
        .style("--top", d3.randomUniform(100, 300)());
    
    fish.append("span").attr("class", "body");
    fish.append("span").attr("class", "eye");
    fish.append("span").attr("class", "fin");
    fish.append("span").attr("class", "tail");
}

綁定鼠標(biāo)單擊事件,當(dāng)按下鼠標(biāo)時(shí)就生成一條魚(yú):

function buildFish(e) {
    //略....
    .style("--top", e.clientY);
}

window.addEventListener("click", buildFish);

并且讓魚(yú)的嘴部和點(diǎn)擊的位置在一條水平線(xiàn)上:

.fish {
    top: calc(var(--top) * 1px - var(--r));
}

最后,在頁(yè)面載入時(shí)自動(dòng)生成 3 條魚(yú),以免頁(yè)面載入后一片空白:

function buildFish(e) {
    //略....
    .style("--top", e ? e.clientY : d3.randomUniform(100, 300)());
}

d3.range(3).forEach(buildFish);

大功告成!

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/97146.html

相關(guān)文章

  • 前端每日實(shí)戰(zhàn)121# 視頻演示何用 CSS D3 創(chuàng)作一個(gè)小魚(yú)游動(dòng)交互動(dòng)畫(huà)

    摘要:效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。引入庫(kù)刪除掉中的元素和文件中的變量聲明代碼。創(chuàng)建一個(gè)函數(shù),用于生成一條魚(yú)。 showImg(https://segmentfault.com/img/bVbf6nx?w=400&h=302); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽,點(diǎn)...

    keke 評(píng)論0 收藏0
  • 前端每日實(shí)戰(zhàn) 2018年10月至2019年6月項(xiàng)目匯總(共 20 個(gè)項(xiàng)目)

    摘要:過(guò)往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月至年月發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專(zhuān)欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過(guò)程,再配合詳細(xì)的代碼解讀, 過(guò)往項(xiàng)目 2018 年 9 月份項(xiàng)目匯總(共 26 個(gè)項(xiàng)目) 2018 年 8 月份項(xiàng)目匯總(共 29 個(gè)項(xiàng)目) 2018 年 7 月份項(xiàng)目匯總(...

    muddyway 評(píng)論0 收藏0
  • 前端每日實(shí)戰(zhàn):108# 視頻演示何用 CSS D3 創(chuàng)作一個(gè)抽象黑白交疊動(dòng)畫(huà)

    摘要:引入庫(kù)用為表示圓數(shù)量的變量賦值用生成元素用為表示子元素下標(biāo)的變量賦值刪除掉文件中的相關(guān)元素和文件中相關(guān)的變量。最后,把圓的數(shù)量調(diào)整為個(gè)大功告成 showImg(https://segmentfault.com/img/bVbfvrc?w=400&h=301); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。 https://codepen.io/comeho...

    chavesgu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<