提到程序猿，很多人脑海中浮现的刻板印象是：直男、木讷、不解风情。不可否认，这个群体确实挺“直”，心思都花在逻辑和代码上了，哪有时间兜圈子。但如果你因此断定程序猿不懂浪漫，那可就大错特错了。

程序猿的时间大多给了工作和学习，比起一般人，可能确实少了一些风花雪月的机会。但浪漫这件事，他们有自己的表达方式。你心情不好的时候，他分分钟就能搞出个让你眼前一亮的小惊喜——比如，用100种语言跟你表白。

这里说的“语言”，可不是编程语言，而是实实在在的各个国家的语言文字。下面就是一位前端程序猿制作的“一百种语言的LOVE”页面，代码直接贴出来了，感兴趣的可以参考一下。

index.html

HTML 页面结构非常简单，头部引入了一个样式文件 style.css，底部引入了一个 JS 脚本 script.js。核心逻辑都在后面这两个文件里。

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 {
    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;
}

@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 {
    from {
        opacity: 0;
        -webkit-transform: scale(0.8);
                transform: scale(0.8);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

@keyframes openModal {
    from {
        opacity: 0;
        -webkit-transform: scale(0.8);
                transform: scale(0.8);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

着重看这些样式。背景用了一组从暖色到冷色的渐变，恰好对应了彩虹色系，视觉上就很讨喜。卡片布局用的是 CSS Grid，每行5列，每个卡片都带有圆角、阴影，以及一种微妙的“浮雕”感。点击卡片后，会弹出一个模态框，里面会放大显示对应语言的“爱”字，并配上心形背景装饰。整个交互的视觉反馈非常细腻，从动画过渡到字体大小自适应，都考虑得很周到。

script.js

const dl = document.getElementById('list-group');
const modal = document.getElementById('modal');

dl.addEventListener('click', openModal);

function populateList() {
    let output = '';
    loveTranslations.forEach((love) => {
        if (love.language === 'georgian' || love.language === 'malayalam' || love.language === 'tatar') {
            output += `

                
${love.word}
                
${love.language}
            
`;
        } else if (to_medium.includes(love.language) === true) {
            output += `

                
${love.word}
                
${love.language}
            
`;
        } else if (to_italic.includes(love.language) === true) {
            output += `

                
${love.word}
                
${love.language}
            
`;
        } else {
            output += `

                
${love.word}
                
${love.language}
            
`;
        }
    });
    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) {
            modal.innerHTML += `X
            
${e.target.children[0].innerText}
            
${e.target.children[1].innerText}
`;
        } else if (to_medium.includes(lang) === true) {
            modal.innerHTML += `X
            
${e.target.children[0].innerText}
            
${e.target.children[1].innerText}
`;
        } else if (lang === 'georgian' || lang === 'malayalam' || lang === 'tatar') {
            modal.innerHTML += `X
            
${e.target.children[0].innerText}
            
${e.target.children[1].innerText}
`;
        } else {
            modal.innerHTML += `X
            
${e.target.children[0].innerText}
            
${e.target.children[1].innerText}
`;
        }
    }
}

function closeModal() {
    document.getElementById('modal').classList.toggle('active');
    modal.innerHTML = '';
}

const loveTranslations = [
    { "language": "english", "word": "love" },
    { "language": "pish", "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": "ljuba vi" },
    { "language": "bulgarian", "word": "любов" },
    { "language": "catalan", "word": "amor" },
    { "language": "cebuano", "word": "gugma" },
    { "language": "chinese", "word": "爱" },
    { "language": "corsican", "word": "amore" },
    { "language": "croatian", "word": "ljuba v" },
    { "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": "ja vanese", "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": "fitia vana" },
    { "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" }
];

const to_italic = ['hebrew', 'hindi', 'korean', 'kannada', 'lao', 'macedonian', 'mongolian', 'nepali', 'odia', 'russian', 'serbian', 'telugu', 'thai', 'marathi'];
const to_medium = ['belarusian', 'bengali', 'greek', 'armenian', 'bulgarian', 'gujarati', 'khmer', 'kazakh', 'kyrgyz', 'punjabi', 'tamil', 'ukranian'];

populateList();

JS 部分的逻辑很清晰。首先，一个 loveTranslations 数组包含了100种语言中“爱”的写法，从英语、法语到汉语、日语，甚至还有斯瓦希里语和祖鲁语，覆盖得非常全。数据展示时，根据字符长度和书写系统，动态调整了字体大小和样式——比如格鲁吉亚语、马拉雅拉姆语这些字符较复杂的，会显示得更小一些；而希伯来语、印地语这类需要倾斜的，则加上了 italic 类。点击卡片后，会弹出一个模态窗口，将对应文字放大显示，并配上心形背景，效果很惊艳。

整个项目没有依赖任何第三方库，纯粹用原生 HTML/CSS/JS 实现，而且从移动端到桌面端的响应式适配都做了，细节处理得很到位。这大概就是程序猿特有的浪漫方式——不用花言巧语，用代码把心意直接摆在你面前。当你看到屏幕上跳出100种语言的“我爱你”，那种感觉，比收到一束花要来得更特别一点。