您好,登錄后才能下訂單哦!
怎么使用CSS和D3實(shí)現(xiàn)光斑粒子交相輝映的效果?這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
每日前端實(shí)戰(zhàn)系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
定義 dom,容器中包含 3 個(gè)子元素:
<div class='container'> <span></span> <span></span> <span></span> </div>
設(shè)置頁面背景:
body { margin: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #222, black 20%); }
定義容器尺寸:
.container { width: 100%; height: 100%; }
設(shè)置光斑的樣式,其中定義了偏亮和偏暗的 2 個(gè)顏色變量:
.container { position: relative; } .container span { --bright-color: #d4ff00; --dark-color: #e1ff4d; position: absolute; width: 30px; height: 30px; margin-left: -15px; margin-top: -15px; background: radial-gradient(var(--bright-color), var(--dark-color)); border-radius: 50%; box-shadow: 0 0 25px 3px var(--dark-color); }
把光斑定位到頁面中心:
.container span { transform: translateX(50vw) translateY(50vh); }
增加光斑從中心向四周擴(kuò)散和收縮的動(dòng)畫效果:
.container span { animation: animate 1.5s infinite alternate; animation-delay: calc(var(--n) * 0.015s); } @keyframes animate { 80% { filter: opacity(1); } 100% { transform: translateX(calc(var(--x) * 1vw)) translateY(calc(var(--y) * 1vh)); filter: opacity(0); } }
定義動(dòng)畫中用到的變量 --x
、--y
和 --n
:
.container span:nth-child(1) { --x: 20; --y: 30; --n: 1; } .container span:nth-child(2) { --x: 60; --y: 80; --n: 2; } .container span:nth-child(3) { --x: 10; --y: 90; --n: 3; }
設(shè)置容器的景深,使光斑的運(yùn)動(dòng)有從遠(yuǎn)到近的感覺:
.container { perspective: 500px; } .container span { transform: translateX(50vw) translateY(50vh) translateZ(-1000px); }
至此,少量元素的動(dòng)畫效果完成,接下來用 d3 批量創(chuàng)建 dom 元素和 css 變量。
引入 d3 庫,同時(shí)刪除 html 文件中的子元素和 css 文件中的子元素變量:
<script src="https://d3js.org/d3.v5.min.js"></script>
定義光斑粒子數(shù)量:
const COUNT = 3;
批量創(chuàng)建 dom 元素:
d3.select('.container') .selectAll('span') .data(d3.range(COUNT)) .enter() .append('span');
為 dom 元素設(shè)置 --x
、--y
和 --n
的值,其中 --x
和 --y
是 1 到 99 的隨機(jī)數(shù):
d3.select('.container') /* 略 */ .style('--x', () => d3.randomUniform(1, 99)()) .style('--y', () => d3.randomUniform(1, 99)()) .style('--n', d => d);
再為 dom 元素設(shè)置 --bright-color
和 --dark-color
的值:
d3.select('.container') /* 略 */ .style('--dark-color', (d) => d3.color(`hsl(${70 + d * 0.1}, 100%, 50%)`)) .style('--bright-color', (d) => d3.color(`hsl(${70 + d * 0.1}, 100%, 50%)`).brighter(0.15));
最后,把光斑粒子數(shù)量設(shè)置為 200 個(gè):
const COUNT = 200;
感謝各位的閱讀!看完上述內(nèi)容,你們對怎么使用CSS和D3實(shí)現(xiàn)光斑粒子交相輝映的效果大概了解了嗎?希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。