這篇文章帶給大家的內容是關於如何使用CSS 和D3實現擺線搖擺的效果動畫,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
定義dom,容器包含3 個元素,代表3 個擺線:
<div> <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; }
用徑向漸變為小球增加光影:
.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); }
以擺線的頂點為原點,將擺線向左旋轉:
.pendulums span { transform-origin: 50% top; transform: rotate(25deg); }
讓擺線擺動起來:
.pendulums span { animation: swing ease-in-out infinite; animation-duration: 1.5s; } @keyframes swing { 50% { transform: rotate(-25deg); } }
為每條擺線定義下標變數:
.pendulums span:nth-child(1) { --n: 1; } .pendulums span:nth-child(2) { --n: 2; } .pendulums span:nth-child(3) { --n: 3; }
用變數設定擺線的長度,和動畫的時長,都是逐漸增大的等差數列:
.pendulums span { height: calc((var(--n) - 1) * 1em + 15em); animation-duration: calc((var(--n) - 1) * 0.02s + 1.5s); }
接下來用d3 來批次處理dom 元素和css 變數:
介紹d3 函式庫:
<script></script>
用d3 建立擺線的dom 元素:
const COUNT = 3; d3.select('.pendulums') .selectAll('span') .data(d3.range(COUNT)) .enter() .append('span')
用d3 定義擺線的下標變數:
d3.select('.pendulums') .selectAll('span') .data(d3.range(COUNT)) .enter() .append('span') .style('--n', (d) => d + 1);
刪除掉html文件中相關的dom 定義和css 檔案中的變數定義。
最後,把擺線的數量調整為 15 個。
const COUNT = 15;
相關推薦:
以上是如何使用CSS 和D3實現擺線搖擺的效果動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!