一百种语言的LOVE

2023年快要到来啦，很高兴这次我们又能一起度过~

一、前言

二、详细介绍

三、效果展示

四、代码编写

index.html

script.js

style.css

五、获取代码

需要源码，可以私信我(⊙o⊙)？关注我？

一、前言

时光荏苒，白驹过隙。

二、详细介绍

最近更新了很多跨年烟花系列，

在这新更新一百种语言的LOVE，主要是利用了很多的 js 字体等

并且有丰富的css样式

非常的好看！！！

三、效果展示

见下图

是不是很好看呢？

四、代码编写

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>CodePen - 100 List items: Love translations ♡</title><link rel="stylesheet" href="css/style.css" /></head><body><dl id="list-group"></dl><div id="modal"></div><script src="js/script.js"></script></body>
</html>

script.js

const dl = document.getElementById('list-group');
const modal = document.getElementById('modal');dl.addEventListener('click', openModal);function populateList() {let output = '';loveTranslations.forEach((love) => {// conditionals to change font sizes & style for larger words & langauge by adding a class to the <dt>if (love.language === 'georgian' || love.language === 'malayalam' || love.language === 'tatar') {output += `<div class="item" tabindex="0"><dt class="smaller">${love.word}</dt><dd>${love.language}</dd></div>`;} else if (to_medium.includes(love.language) === true) {output += `<div class="item" tabindex="0"><dt class="medium">${love.word}</dt><dd>${love.language}</dd></div>`;} else if (to_italic.includes(love.language) === true) {output += `<div class="item" tabindex="0"><dt class="italic">${love.word}</dt><dd>${love.language}</dd></div>`;} else {output += `<div class="item" tabindex="0"><dt>${love.word}</dt><dd>${love.language}</dd></div>`;}});dl.innerHTML = output;
}function openModal(e) {if (e.target.nodeName.toLowerCase() === 'dl') { return; }else if (e.target.classList.contains('item') === true) {const lang = e.target.children[1].innerText.toLowerCase();modal.classList.toggle('active');if (to_italic.includes(lang) === true) { // conditional to change font size for different word sizes and lettering styles, adding classes to h1modal.innerHTML += `<button onclick="closeModal()" id="modal-close-btn">X</button><h1 class="italic">${e.target.children[0].innerText}</h1><p class="lang-name">${e.target.children[1].innerText}</p>`;} else if (to_medium.includes(lang) === true) {modal.innerHTML += `<button onclick="closeModal()" id="modal-close-btn">X</button><h1 class="medium italic">${e.target.children[0].innerText}</h1><p class="lang-name" style="margin-top:1.5rem">${e.target.children[1].innerText}</p>`;} else if (lang === 'georgian' || lang === 'malayalam' || lang === 'tatar') {modal.innerHTML += `<button onclick="closeModal()" id="modal-close-btn">X</button><h1 class="smaller italic">${e.target.children[0].innerText}</h1><p class="lang-name" style="margin-top: 3rem;">${e.target.children[1].innerText}</p>`;} else {modal.innerHTML += `<button onclick="closeModal()" id="modal-close-btn">X</button><h1>${e.target.children[0].innerText}</h1><p class="lang-name">${e.target.children[1].innerText}</p>`;}}
}function closeModal() {document.getElementById('modal').classList.toggle('active');modal.innerHTML = ''; // clearing out the modal text
}// 100 love translatons: Object Array
const loveTranslations = [{"language": "english","word": "love"},{"language": "spanish","word": "amor"},{"language": "french","word": "l'amour"},{"language": "dutch","word": "liefde"},{"language": "greek","word": "αγάπη"},{"language": "Arabic","word": "حب"},{"language": "albanian","word": "dashuri"},{"language": "amharic","word": "ፍቅር"},{"language": "armenian","word": "Սեր"},{"language": "azerbaijani","word": "sevgi"},{"language": "basque","word": "maitasuna"},{"language": "belarusian","word": "каханне"},{"language": "bengali","word": "ভালবাসা"},{"language": "bosnian","word": "ljubavi"},{"language": "bulgarian","word": "любов"},{"language": "catalan","word": "amor"},{"language": "cebuano","word": "gugma"},{"language": "chinese","word": "爱"},{"language": "corsican","word": "amore"},{"language": "croatian","word": "ljubav"},{"language": "czech","word": "milovat"},{"language": "danish","word": "elsker"},{"language": "esperanto","word": "amo"},{"language": "estonian","word": "armastus"},{"language": "filipino","word": "pag-ibig"},{"language": "finnish","word": "rakkaus"},{"language": "frisian","word": "leafde"},{"language": "galician","word": "amor"},{"language": "georgian","word": "სიყვარული"},{"language": "german","word": "liebe"},{"language": "gujarati","word": "પ્રેમ"},{"language": "haitian creole","word": "lanmou"},{"language": "hausa","word": "soyayya"},{"language": "hawaiian","word": "aloha"},{"language": "hebrew","word": "אהבה"},{"language": "hindi","word": "प्रेम"},{"language": "hmong","word": "kev hlub"},{"language": "hungarian","word": "szeretet"},{"language": "icelandic","word": "ást"},{"language": "igbo","word": "ihunanya"},{"language": "indonesian","word": "cinta"},{"language": "irish","word": "grá"},{"language": "italian","word": "amore"},{"language": "japanese","word": "愛"},{"language": "javanese","word": "katresnan"},{"language": "kannada","word": "ಪ್ರೀತಿ"},{"language": "kazakh","word": "махаббат"},{"language": "khmer","word": "ស្រឡាញ់"},{"language": "kiryarwanda","word": "urukundo"},{"language": "korean","word": "사랑"},{"language": "kurdish","word": "evîn"},{"language": "kyrgyz","word": "сүйүү"},{"language": "lao","word": "ຮັກ"},{"language": "latin","word": "amare"},{"language": "latvian","word": "mīlestība"},{"language": "lithuanian","word": "meilė"},{"language": "luxembourish","word": "Léift"},{"language": "macedonian","word": "убов"},{"language": "malagasy","word": "fitiavana"},{"language": "malay","word": "cinta"},{"language": "malayalam","word": "സ്നേഹം"},{"language": "maltese","word": "imħabba"},{"language": "moari","word": "aroha"},{"language": "marathi","word": "प्रेम"},{"language": "mongolian","word": "хайр"},{"language": "burmese","word": "aahkyit"},{"language": "nepali","word": "माया"},{"language": "norwegian","word": "kjærlighet"},{"language": "odia","word": "ପ୍ରେମ"},{"language": "pashto","word": "مينه"},{"language": "persian","word": "عشق"},{"language": "polish","word": "miłość"},{"language": "portuguese","word": "amar"},{"language": "punjabi","word": "ਪਿਆਰ"},{"language": "romanian","word": "dragoste"},{"language": "russian","word": "люблю"},{"language": "samoan","word": "alofa"},{"language": "scots gaelic","word": "ghaoil"},{"language": "serbian","word": "љубав"},{"language": "sesotho","word": "lerato"},{"language": "shona","word": "rudo"},{"language": "sindhi","word": "پيار"},{"language": "sinhala","word": "ආදරය"},{"language": "slovak","word": "láska"},{"language": "slovinian","word": "ljubezen"},{"language": "somali","word": "jacayl"},{"language": "sudanese","word": "bogoh"},{"language": "swahili","word": "upendo"},{"language": "swedish","word": "kärlek"},{"language": "tamil","word": "காதல்"},{"language": "tatar","word": "мәхәббәт"},{"language": "telugu","word": "ప్రేమ"},{"language": "thai","word": "รัก"},{"language": "turkish","word": "aşk"},{"language": "turkmen","word": "söýgi"},{"language": "ukranian","word": "кохання"},{"language": "urdu","word": "محبت"},{"language": "vietnamese","word": "yêu"},{"language": "yiddish","word": "ליבע"},{"language": "zulu","word": "uthando"}
];// array of languages that the characters need to italicised
const to_italic = ['hebrew', 'hindi', 'korean', 'kannada', 'lao', 'macedonian', 'mongolian', 'nepali', 'odia', 'russian', 'serbian', 'telugu', 'thai', 'marathi'];// array of languages that need to reduced in font size
const to_medium = ['belarusian', 'bengali', 'greek', 'armenian', 'bulgarian', 'gujarati', 'khmer', 'kazakh', 'kyrgyz', 'punjabi', 'tamil', 'ukranian'];populateList();

style.css

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');* {margin: 0;padding: 0;box-sizing: border-box;
}body {overflow-x: hidden;background-image: -webkit-gradient(linear,right bottom, left top,from(#ffadad),color-stop(#ffd6a5), color-stop(#fdffb6),color-stop(#caffbf),color-stop(#9bf6ff),color-stop(#a0c4ff),to(#bdb2ff));background-image: linear-gradient(to top left,#ffadad,#ffd6a5, #fdffb6,#caffbf,#9bf6ff,#a0c4ff,#bdb2ff);color: #5d5865;
}#list-group {display: grid;grid-template-columns: repeat(5, 1fr);grid-gap: 0.5rem; gap: 0.5rem;padding: 1rem;
}.item {position: relative;display: -webkit-box;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-box-pack: center;justify-content: center;-webkit-box-align: center;align-items: center;background-image: linear-gradient(45deg, rgba(255,255,255,0.3), transparent, rgba(255,255,255,0.3));border-radius: 2rem;padding: 3rem 0;box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);cursor: pointer;-webkit-transition: 0.3s;transition: 0.3s;
}.item::before,
.item::after {content: "";position: absolute;z-index: 1;width: 3rem;height: 3rem;
}.item::before {bottom: 1rem; left: 1rem;border-radius: 0 0 0 1rem;background-image: linear-gradient(225deg, transparent 50%, rgba(255, 255, 255, 0.5));
}.item::after {top: 1rem; right: 1rem;border-radius: 0 1rem 0 0;background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.5));
}.item:hover,
.item:focus,
.item:active {background-color: white;outline: none;
}dt {text-align: right;font-family: 'Great Vibes', serif;font-size: 3rem;
}dt.smaller {font-size: 1.8rem;
}dt.medium {font-size: 2.1rem;
}dt.smaller,
dt.medium {font-style: italic;
}.italic {font-style: italic;
}dd {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-weight: 300;font-size: 0.9rem;
}dd, dt {pointer-events: none;
}#modal {display: none;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-box-pack: center;justify-content: center;-webkit-box-align: center;align-items: center;left: 2rem; top: 2rem; right: 2rem; bottom: 2rem;border-radius: 1rem;box-shadow: 0.5rem 0.5rem 5rem rgba(0, 0, 0, 0.5);border: 1px solid rgba(0, 0, 0, 0.25);background-color: white;
}#modal.active {min-height: 15rem;display: -webkit-box;display: flex;position: fixed;z-index: 2;-webkit-animation: openModal 0.2s;animation: openModal 0.2s;
}#modal .lang-name {position: relative;z-index: 4;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-weight: 600;font-size: 1.3rem;text-transform: capitalize;
}#modal h1 {position: relative;z-index: 1;font-family: 'Great Vibes', serif;font-size: 10rem;line-height: 1.3;
}#modal h1.smaller {font-size: 5rem;
}#modal h1.medium {font-size: 7.5rem;
}#modal h1::after,
#modal h1::before { /* modal heart shapes */content: "";position: absolute;bottom: 50%; left: 50%;-webkit-transform: translateX(-50%) translateY(52%);transform: translateX(-50%) translateY(52%);-webkit-clip-path: polygon(50% 10%, 66% 0, 100% 0, 100% 50%, 50% 100%, 0 50%, 0 0, 33% 0);clip-path: polygon(50% 10%, 66% 0, 100% 0, 100% 50%, 50% 100%, 0 50%, 0 0, 33% 0);
}#modal h1::before {z-index: -2;background-color: lightcoral;opacity: 0.5;width: 10rem;height: 10rem;border-radius: 3rem 3rem 6rem 6rem;
}#modal h1::after {z-index: -1;background-color: lightcoral;opacity: 0.3;width: 12rem;height: 12rem;border-radius: 3rem 3rem 6rem 6rem;
}#modal-close-btn {position: absolute;top: 1rem; right: 1rem;width: 2rem; height: 2rem;text-align: center;display: -webkit-box;display: flex;-webkit-box-pack: center;justify-content: center;-webkit-box-align: center;align-items: center;background-color: transparent;border: 1px solid rgba(93, 88, 101, 0.5);border-radius: 0.5rem;-webkit-transition: 0.2s ease;transition: 0.2s ease;
}#modal-close-btn:hover {background-color: rgba(0, 0, 0, 0.05);border: 1px solid rgba(93, 88, 101, 0.8);
}button {cursor: pointer;
}/* tablet styles */
@media screen and (max-width: 959px) {#list-group {grid-template-columns: repeat(4, 1fr);}#modal {left: 1rem; top: 1rem; right: 1rem; bottom: 1rem;}
}@media screen and (max-width: 759px) {#list-group {grid-template-columns: repeat(3, 1fr);}#modal h1 {font-size: 7rem;line-height: 1.3;}#modal h1.smaller {font-size: 3rem;}#modal h1.medium {font-size: 4.4rem;}#modal {left: 0.75rem; top: 0.75rem; right: 0.75rem; bottom: 0.75rem;}
}@media screen and (max-width: 639px) {#list-group {grid-template-columns: repeat(2, 1fr);}#modal h1 {font-size: 5rem;line-height: 1.3;}#modal h1.smaller {font-size: 2rem;}#modal h1.medium {font-size: 3.3rem;}#modal {left: 0.5rem; top: 0.5rem; right: 0.5rem; bottom: 0.5rem;}
}@-webkit-keyframes openModal { /* subtle fade in for modal */from {opacity: 0;-webkit-transform: scale(0.8);transform: scale(0.8);} to {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
}@keyframes openModal { /* subtle fade in for modal */from {opacity: 0;-webkit-transform: scale(0.8);transform: scale(0.8);} to {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
}

五、获取代码

在这里我先告诉大家一下，关于路径问题，因为上次有好多朋友们告诉我，部分效果显示不出来，大家看下图，为正确的代码文件及路径

js 文件夹内

css 文件夹内

第一步，通过微信公众号下载源码压缩包，解压并打开文件夹，即为上图样式（复制源码请注意路径）

第二步，点击 html 文件打开即可

可根据需求更改代码

以上就是我们此次跨年烟花的全部内容了，是否精彩呢？如果有好的建议或者想法可以联系我，一起交流

一百种语言的LOVE相关推荐

真全！GitHub上出现了一个353种语言资源的汇总
来源:AI科技评论本文约1200字,建议阅读5分钟随着AI技术的迅猛发展,机器翻译技术的出现让拯救濒危语言成为可能. 据联合国科教文组织统计世上现存的7000+种语言,超过四百种濒临灭绝全世界平均 ...
元宇宙中可跨语种交流，Meta 发布新语音模型，支持128种语言无障碍对话
编译 | 禾木木出品 | AI科技大本营(ID:rgznai100) 语言交流是人类互动一种自然的方式,随着语音技术的发展,我们可以与设备以及未来的虚拟世界进行互动,由此虚拟体验将于我们的现实世界融 ...
元宇宙中可跨语种交流！Meta 发布新语音模型，支持128种语言无障碍对话
编译 | 禾木木出品 | AI科技大本营(ID:rgznai100) 语言交流是人类互动一种自然的方式,随着语音技术的发展,我们可以与设备以及未来的虚拟世界进行互动,由此虚拟体验将于我们的现实世界融 ...
全球首个突破200种语言互译的翻译引擎，百度翻译打破世界沟通壁垒
机器翻译作为人工智能关键技术之一,正日益成为企业智能化升级的重要应用场景.12月1日,百度大脑开放日举办了以"机器翻译沟通全世界"为主题的专场活动. IDC 中国副总裁兼首席分析 ...
Facebook增强版LASER开源：零样本迁移学习，支持93种语言
来源| Facebook AI 研究院译者 | Linstancy 责编 | 琥珀出品 | AI 科技大本营(ID:rgznai100) [导语]为了加速自然语言处理 (NLP) 在更多语言上实现 ...
世界最大的多语言语音数据集现已开源！超40万小时，共23种语言
点击上方"视学算法",选择加"星标"或"置顶" 重磅干货,第一时间送达博雯发自凹非寺量子位报道 | 公众号 QbitAI 最近,F ...
无监督方法实现C++、Java、Python 代码转换，程序员：出了bug怎么办，两种语言都要看吗？...
点击上方"视学算法",选择加"星标" 重磅干货,第一时间送达本文转载自:机器之心 | 参与:魔王 Facebook 提出的无监督代码转换方法 TransC ...
【Python】轻松识别文字，这款Python OCR库支持超过80种语言
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达本文转自|Python大数据分析什么是OCR? 有一款软件叫扫描全 ...
哪种编程语言又快又省电？有人对比了27种语言
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达本文转自|OpenCV学堂在手机快没电时,管理软件往往会提醒我们 ...

一百种语言的LOVE

一、前言

二、详细介绍

三、效果展示

四、代码编写

index.html

script.js

style.css

五、获取代码

一百种语言的LOVE相关推荐

最新文章

热门文章