简单的春联效果展示

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

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

html 复制代码
<!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>
js 复制代码
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();
css 复制代码
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;
}

效果展示:

相关推荐
white-persist7 分钟前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师1 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang1 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_1 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端1 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm