摘要:引入庫聲明一個數組,包含若干單詞用創建元素用為變量賦值刪除文件中相關的元素和文件中相關的變量。把數組元素改為愛在各種語言的單詞愛最后,為第個單詞設置特殊的文字樣式大功告成
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/xJvERW
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cm94eu6
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,容器中包含 3 個子元素,每個子元素中有一個單詞:
aaa bbb ccc
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }
定義容器尺寸:
.love { width: 450px; height: 450px; }
設置文本樣式:
.love { position: relative; } .love span { position: absolute; left: 0; color: goldenrod; font-size: 20px; font-family: sans-serif; text-shadow: 0 0 1em white; }
定義文本左右往復移動的動畫:
.love span { animation: x-move 10s ease-in-out infinite alternate; } @keyframes x-move { to { left: 450px; } }
定義子元素的下標變量,設置動畫延時,使各單詞依次入場:
.love { --particles: 3; } .love span { animation-delay: calc(20s / var(--particles) * var(--n) * -1); } .love span:nth-child(1) { --n: 1; } .love span:nth-child(2) { --n: 2; } .love span:nth-child(3) { --n: 3; }
增加文本沿心形運動的動畫效果:
.love span { animation: x-move 10s ease-in-out infinite alternate, y-move 20s linear infinite; } @keyframes y-move { 0% { transform: translateY(180px); } 10% { transform: translateY(45px); } 15% { transform: translateY(5px); } 18% { transform: translateY(0); } 20% { transform: translateY(5px); } 22% { transform: translateY(35px); } 24% { transform: translateY(65px); } 25% { transform: translateY(110px); } 26% { transform: translateY(65px); } 28% { transform: translateY(35px); } 30% { transform: translateY(5px); } 32% { transform: translateY(0); } 35% { transform: translateY(5px); } 40% { transform: translateY(45px); } 50% { transform: translateY(180px); } 71% { transform: translateY(430px); } 72.5% { transform: translateY(440px); } 75% { transform: translateY(450px); } 77.5% { transform: translateY(440px); } 79% { transform: translateY(430px); } 100% { transform: translateY(180px); } }
接下來用 d3 批量處理 dom 元素和 css 變量。
引入 d3 庫:
聲明一個數組,包含若干單詞:
const words = ["aaa", "bbb", "ccc"];
用 d3 創建 dom 元素:
d3.select(".love") .selectAll("span") .data(words) .enter() .append("span") .text((d) => d);
用 d3 為 css 變量賦值:
d3.select(".love") .style("--particles", words.length) .selectAll("span") .data(words) .enter() .append("span") .style("--n", (d, i) => i + 1) .text((d) => d);
刪除 html 文件中相關的 dom 元素和 css 文件中相關的 css 變量。
把數組元素改為“愛”在各種語言的單詞:
const words = [ "愛", "Love", "Amour", "Liebe", "Amore", "Amor", "Любовь", "????", "?????", "Cinta", "Αγ?πη", "??", "Liefde", "Dashuri", "Каханне", "Ljubav", "Láska", "Armastus", "Mahal", "????", "Szerelem", "Grá", "Mīlestība", "Meil?", "Любов", "?убовта", "Cinta", "???", "Dragoste", "Láska", "Renmen", "???", "muna?a", "Sevgi", "?убав", "karout", "amà", "am?r", "k?rleiki", "mborayhu", "Upendo", "sòòyayyàà", "ljubav", "???", "с?ю", "с?й??", "tia", "aroha", "KHAIR", "?????", "kj?rlighet", "munay", "jecel", "K?rlek", "soymek", "Mahal", "ярату", "????", "sopp", "uthando", "???????", "A?k", "Tình yêu", "????"];
最后,為第 1 個單詞設置特殊的文字樣式:
.love span:first-child { color: orangered; font-size: 3em; text-shadow: 0 0 0.1em black, 0 0 1em white; z-index: 1; }
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108304.html
摘要:引入庫聲明一個數組,包含若干單詞用創建元素用為變量賦值刪除文件中相關的元素和文件中相關的變量。把數組元素改為愛在各種語言的單詞愛最后,為第個單詞設置特殊的文字樣式大功告成 showImg(https://segmentfault.com/img/bVbfwGW?w=400&h=303); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://cod...
摘要:每一個陰影屬性值就可以繪制出一個圓點,因為可以接收多個屬性性,所以就可以用多個圓點來畫點陣圖了。 showImg(https://segmentfault.com/img/bVbsSVm?w=400&h=348); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comehope/pen/KLvENb 可交互視頻 此視頻...
摘要:每一個陰影屬性值就可以繪制出一個圓點,因為可以接收多個屬性性,所以就可以用多個圓點來畫點陣圖了。 showImg(https://segmentfault.com/img/bVbsSVm?w=400&h=348); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comehope/pen/KLvENb 可交互視頻 此視頻...
閱讀 3499·2023-04-25 15:52
閱讀 581·2021-11-19 09:40
閱讀 2572·2021-09-26 09:47
閱讀 1023·2021-09-22 15:17
閱讀 3548·2021-08-13 13:25
閱讀 2200·2019-08-30 15:56
閱讀 3460·2019-08-30 13:56
閱讀 2095·2019-08-30 11:27