简单的春联效果展示

站长

2024年03月28日 13:49 · 阅读数 9

春联是中国传统节日春节期间的装饰，它代表了对新一年的美好祝愿和祈求。春联一般由两条横幅组成，分别称为上联和下联。上联和下联在内容上相互对应，形式上对仗工整，富有节日的喜庆气氛。在中国文化中，春联不仅是一种文学形式，也承载着人们对未来的希望和祝福。

下边我就用比较简单html、js、css做一个简单的春联效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>春联展示</title>
    <link rel="stylesheet" href="./dragon.css">
</head>
<body>
    <button id="generateCouplet">生成春联</button>
    <div class="couplet-container">
        <div class="couplet" id="upperCouplet"></div>
        <div class="couplet" id="lowerCouplet"></div>
    </div>
    <script src="./dragon.js"></script>
</body>
</html>

document.getElementById("generateCouplet").addEventListener("click", generateAndDisplayCouplet);

const couplets = [
    { upper: "龙舞新春迎吉祥", lower: "凤鸣佳节祝安康" },
    { upper: "龙潜花影岁岁新", lower: "凤舞梅枝春春好" },
    { upper: "龙飞凤舞庆丰年", lower: "梅破柳新迎新岁" },
    { upper: "龙回乾坤展宏图", lower: "凤起山河绘锦绣" },
    { upper: "龙腾虎跃迎春到", lower: "凤舞燕歌送旧年" },
    { upper: "龙跃千门万户开", lower: "梅开二月春风来" },
    { upper: "龙光照耀富贵来", lower: "凤翥云端喜气盈" },
    { upper: "龙腾四海春波暖", lower: "凤舞九州福星高" },
    { upper: "龙跃黄河水", lower: "凤凰涅槃火" },
    { upper: "龙腾盛世显祥瑞", lower: "凤舞华年迎福来" },
    { upper: "龙吟风起云涌动", lower: "凤鸣乐奏天地和" },
    { upper: "龙踏山河万物春", lower: "凤舞乾坤兆丰年" },
    { upper: "龙飞凤舞庆太平", lower: "鸿运九州贺新春" },
    { upper: "龙潭虎穴见勇者", lower: "凤阙麒麟识君子" },
    { upper: "龙腾万里云水间", lower: "凤舞千山翠霭里" },
    { upper: "龙门翻波跃金光", lower: "凤阁展翅翔紫烟" },
    { upper: "龙骧虎步生春色", lower: "凤翥鹤鸣报吉祥" },
    { upper: "龙章凤彩贺新禧", lower: "瑞气盈门迎大吉" },
    { upper: "龙跃彩云追日月", lower: "凤翔花田舞翩翩" },
    { upper: "龙光闪烁映千山", lower: "凤影舞蹈渡万川" },
    { upper: "龙舞春风带暖阳", lower: "凤鸣乐曲迎新岁" },
    { upper: "龙翔凤舞纳吉祥", lower: "福满人间喜洋洋" }
];

function generateAndDisplayCouplet() {
    const coupletIndex = Math.floor(Math.random() * couplets.length);
    const couplet = couplets[coupletIndex];

    const upperCoupletElement = document.getElementById("upperCouplet");
    const lowerCoupletElement = document.getElementById("lowerCouplet");

    // 重置动画
    upperCoupletElement.style.animation = 'none';
    lowerCoupletElement.style.animation = 'none';
    upperCoupletElement.offsetHeight; /* 触发重绘 */
    lowerCoupletElement.offsetHeight; /* 触发重绘 */
    
    // 设置文本
    upperCoupletElement.textContent = couplet.upper;
    lowerCoupletElement.textContent = couplet.lower;

    // 应用动画
    upperCoupletElement.style.animation = 'unfold 2s ease forwards';
    lowerCoupletElement.style.animation = 'unfold 2s ease forwards 1s';
}

// 初始化页面时生成第一对春联
generateAndDisplayCouplet();

body {
    font-family: 'Arial', sans-serif;
    text-align: center;
    background-color: red;
    background-image: url('./dragon.jpg');
    color: gold;
}

.couplet-container {
    margin: 20px auto;
    width: 300px;
}

.couplet {
    background-color: gold;
    color: red;
    width: 0;
    height: 30px;
    margin: 10px 0;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    animation: unfold 0s ease forwards;
}

@keyframes unfold {
    to { width: 100%; }
}

button {
    margin: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: gold;
}

button:hover {
    background-color: darkgoldenrod;
}

效果展示：

简单的春联效果展示