|
導(dǎo)讀網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言,通過(guò)結(jié)合使用其他的Web技術(shù)(如:腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而,超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)(Web)編程的基礎(chǔ),也就是說(shuō)萬(wàn)維網(wǎng)是建立... 網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言,通過(guò)結(jié)合使用其他的Web技術(shù)(如:腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而,超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)(Web)編程的基礎(chǔ),也就是說(shuō)萬(wàn)維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級(jí)文本標(biāo)記語(yǔ)言之所以稱為超文本標(biāo)記語(yǔ)言,是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。 本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于如何使用CSS 和D3實(shí)現(xiàn)擺線搖擺的效果動(dòng)畫,有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)你有所幫助。效果預(yù)覽
代碼解讀定義 dom,容器中包含 3 個(gè)元素,代表 3 條擺線: <div class="pendulums">
<span></span>
<span></span>
<span></span>
</div>居中顯示: body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(lightyellow, burlywood);
}定義容器的尺寸,并畫出固定擺線示意墻: .pendulums {
width: 40em;
height: 30em;
font-size: 10px;
border-top: 0.3em solid cadetblue;
}畫出一條擺線: .pendulums {
position: relative;
}
.pendulums span {
position: absolute;
width: 0.2em;
height: 15em;
background-color: cadetblue;
left: 50%;
}用偽元素畫出擺線底部懸掛的小球: .pendulums span::before {
content: '';
position: absolute;
width: 1.5em;
height: 1.5em;
background: steelblue;
border-radius: 50%;
top: 100%;
left: -0.75em;
}用徑向漸變?yōu)樾∏蛟黾庸庥埃?/p> .pendulums span::before {
background: radial-gradient(
circle at 70% 35%,
white,
darkturquoise 30%,
steelblue 50%
);
}用偽元素畫出小球的陰影: .pendulums span::after {
content: '';
position: absolute;
width: 2em;
height: 0.3em;
background-color: rgba(0, 0, 0, 0.2);
top: 120%;
left: -1em;
filter: blur(0.4em);
}以擺線的頂點(diǎn)為原點(diǎn),將擺線向左旋轉(zhuǎn): .pendulums span {
transform-origin: 50% top;
transform: rotate(25deg);
}讓擺線擺動(dòng)起來(lái): .pendulums span {
animation: swing ease-in-out infinite;
animation-duration: 1.5s;
}
@keyframes swing {
50% {
transform: rotate(-25deg);
}
}為每條擺線定義下標(biāo)變量: .pendulums span:nth-child(1) {
--n: 1;
}
.pendulums span:nth-child(2) {
--n: 2;
}
.pendulums span:nth-child(3) {
--n: 3;
}用變量設(shè)置擺線的長(zhǎng)度,和動(dòng)畫的時(shí)長(zhǎng),都是逐漸增大的等差數(shù)列: .pendulums span {
height: calc((var(--n) - 1) * 1em + 15em);
animation-duration: calc((var(--n) - 1) * 0.02s + 1.5s);
}接下來(lái)用 d3 來(lái)批量處理 dom 元素和 css 變量: <script src="https://d3js.org/d3.v5.min.js"></script> 用 d3 創(chuàng)建擺線的 dom 元素: const COUNT = 3;
d3.select('.pendulums')
.selectAll('span')
.data(d3.range(COUNT))
.enter()
.append('span')用 d3 定義擺線的下標(biāo)變量: d3.select('.pendulums')
.selectAll('span')
.data(d3.range(COUNT))
.enter()
.append('span')
.style('--n', (d) => d + 1);刪除掉 html 文件中相關(guān)的 dom 定義和 css 文件中的變量定義。 最后,把擺線的數(shù)量調(diào)整為 15 個(gè)。 const COUNT = 15; 相關(guān)推薦: 如何使用CSS實(shí)現(xiàn)過(guò)山車loader的動(dòng)畫效果 以上就是如何使用CSS 和D3實(shí)現(xiàn)擺線搖擺的效果動(dòng)畫的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ),涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請(qǐng)收藏一下本站!