父亲节快乐代码部分

最新推荐文章于 2024-10-02 10:53:34 发布

python学生学习圈

最新推荐文章于 2024-10-02 10:53:34 发布

阅读量113

点赞数 2

文章标签： python

本文链接：https://blog.csdn.net/pythonxuexiquan/article/details/139724098

版权

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>成长之旅 - 淡入淡出文字效果</title>
    <style>
        /* 设置全局样式，包括字体、背景、布局 */
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden; /* 隐藏滚动条 */
            font-family: Arial, sans-serif;
            /* 使用本地图片作为背景，注意路径可能需要根据实际环境调整 */
            background-image: url('file:///D:/华为家庭存储/单盘备份/电脑备份/Downloads/01.jpeg');
            background-size: cover; /* 图片填充整个背景 */
            background-position: center; /* 图片居中显示 */
            color: white; /* 文字颜色为白色 */
            position: relative; /* 使得.content的bottom定位生效 */
        }

        /* 定义.content样式，用于放置文本内容 */
        .content {
            position: absolute; /* 使用绝对定位 */
            bottom: 30px; /* 离底部的距离 */
            left: 0;
            right: 0;
            margin: auto; /* 水平居中 */
            width: 70%; /* 内容宽度 */
            max-width: 800px; /* 最大宽度限制 */
            text-align: center; /* 文字居中对齐 */
        }

        /* 定义淡入淡出文字的样式 */
        .fade-text {
            opacity: 0; /* 初始透明度为0，即不可见 */
            animation: fadeInOut 4s ease-in-out forwards; /* 淡入淡出动画 */
            font-size: 40px; /* 字体大小 */
            line-height: 1.5; /* 行间距 */
        }

        /* 定义淡入淡出动画 */
        @keyframes fadeInOut {
            0% {opacity: 0;} /* 开始时透明度为0 */
            50% {opacity: 1;} /* 中间点完全可见 */
            100% {opacity: 0;} /* 结束时透明度恢复为0 */
        }
    </style>
</head>
<body>

<!-- 用于动态显示故事的div容器 -->
<div class="content" id="storyDisplay"></div>

<script>
    // 等待文档加载完毕后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 故事文本
        const story = `在这个特别的日子里，我们向所有的父亲致以最深的敬意和无尽的感激。父亲，您是家中的避风港，用宽广的肩膀扛起生活的重担，用深沉的爱默默守护着我们成长的每一步。您的笑容，如同灯塔照亮我们的前行之路；您的教诲，如同指南针指引我们明辨方向。在您的目光中，我们学会了坚韧与勇气，在您的支持下，我们敢于追求梦想。父亲节，不仅仅是一个节日，它是对所有父亲无私奉献和深情厚爱的颂歌。今天，让我们用一句简单而真挚的“谢谢您，爸爸”，表达那份或许平时不曾轻易说出口的感激之情。无论距离远近，不论时间如何流转，愿每一位父亲都能感受到来自子女的爱与敬意，因为您是我们生命中最伟大的英雄。让我们珍惜与父亲共度的每一刻，无论是欢笑还是泪水，都是我们共同记忆中不可或缺的宝贵财富。愿父爱如山，坚不可摧；愿感恩之心，岁岁年年，永不止息。父亲节快乐！`; 
        // 将故事分割成句子数组，去除可能的空字符串
        const splitStory = story.split(/[，！。]/).filter(Boolean);

        // 获取要显示故事的元素
        let display = document.getElementById('storyDisplay');
        let index = 0; // 当前显示的句子索引
        let paragraph; // 当前的<p>元素

        // 函数用于显示下一部分故事
        function showNextPart() {
            if(index < splitStory.length) {
                // 创建一个新的<p>元素，并设置内容和样式
                paragraph = document.createElement('p');
                paragraph.textContent = splitStory[index] + (index < splitStory.length - 1 ? ' ' : ''); // 如果不是最后一句，添加空格
                paragraph.className = 'fade-text'; // 应用淡入淡出动画样式
                // 将新创建的段落添加到页面
                display.appendChild(paragraph);
                // 增加索引，并在指定时间后继续显示下一部分
                index++;
                setTimeout(showNextPart, 4000); // 间隔时间控制显示速度
            }
        }

        // 启动显示故事的过程
        showNextPart();
    });
</script>
</body>
</html>