祝祖国母亲75周年生日快乐-用HTML实现五星红旗

温轻舟

于 2024-10-01 23:57:07 发布

阅读量334

点赞数 13

分类专栏： web前端项目-源码自取文章标签： html css3 css

本文链接：https://blog.csdn.net/qiao_yue/article/details/142676368

版权

web前端项目-源码自取专栏收录该内容

27 篇文章 21 订阅

订阅专栏

在这特别的日子里，让我们共同祝愿祖国母亲生日快乐，繁荣昌盛！愿您的明天更加美好！！！

同时，也向所有为祖国建设和发展做出贡献的人们致以崇高的敬意和衷心的感谢。是你们的辛勤付出和无私奉献，才换来了祖国今天的辉煌成就。让我们携手共进，共同创造祖国更加美好的未来~ ~ ~

页面效果：页面背景的颜色是动态渐变的，可以根据注释自己调动

HTML源代码：

<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->  
<html lang="zh-CN"> <!-- 设置页面语言为简体中文 -->  
<head>  
    <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->  
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，使页面在移动设备上也能良好显示 -->  
    <title>五星红旗</title> <!-- 设置页面标题为“五星红旗” -->  
</head>  
<body>  
    <h1>祝祖国母亲 75 周年生日快乐！！！</h1> <!-- 主标题，庆祝祖国75周年生日 -->  
    <div class="flag"> <!-- 国旗的容器 -->  
        <div class="star big-star"></div> <!-- 大五角星 -->  
        <div class="star small-star star-1"></div> <!-- 第一颗小五角星 -->  
        <div class="star small-star star-2"></div> <!-- 第二颗小五角星 -->  
        <div class="star small-star star-3"></div> <!-- 第三颗小五角星 -->  
        <div class="star small-star star-4"></div> <!-- 第四颗小五角星 -->  
    </div>  
    <style>  
        /* 页面整体样式 */  
        body {  
            height: 100vh; /* 高度设为视口高度的100% */  
            width: 100vw; /* 宽度设为视口宽度的100% */  
            margin: 0; /* 去除默认外边距 */  
            padding: 0; /* 去除默认内边距 */  
            background-image: linear-gradient(45deg, deepskyblue, #e73038, rgba(255, 213, 0, 0.88), #008071); /* 设置渐变背景色 */  
            background-size: 400%; /* 背景图像大小设置为400% */  
            animation: ty 15s infinite; /* 应用背景动画，15秒循环一次 */  
        }  
  
        @keyframes ty {  
            0% {  
                background-position: 0% 50%; /* 动画开始时背景位置 */  
            }  
            50% {  
                background-position: 100% 50%; /* 动画中间时背景位置 */  
            }  
            100% {  
                background-position: 0% 50%; /* 动画结束时背景位置 */  
            }  
        }  
  
        /* 页面和HTML元素的通用样式 */  
        body, html {  
            height: 100%; /* 高度设为100% */  
            margin: 0; /* 去除默认外边距 */  
            display: flex; /* 使用Flex布局 */  
            justify-content: center; /* 水平居中对齐 */  
            align-items: center; /* 垂直居中对齐 */  
            background-color: #f0f0f0; /* 设置背景颜色，但此处被上面的背景图像覆盖 */  
        }  
  
        /* 主标题样式 */  
        h1 {  
            font-family: "Edu NSW ACT Foundation", cursive; /* 设置字体 */  
            color: #ee1313; /* 设置字体颜色 */  
            grid-column: 1/-1; /* 在Grid布局中设置跨越所有列 */  
            margin: 0; /* 去除默认外边距 */  
            font-weight: 500; /* 设置字体粗细 */  
            font-size: 2.7rem; /* 设置字体大小 */  
        }  
  
        /* 国旗样式 */  
        .flag {  
            width: 300px; /* 宽度设置为300像素 */  
            height: 200px; /* 高度设置为200像素 */  
            background-color: red; /* 背景颜色设置为红色 */  
            position: relative; /* 位置设置为相对定位，以便内部元素使用绝对定位 */  
        }  
  
        /* 星星的通用样式 */  
        .star {  
            position: absolute; /* 位置设置为绝对定位 */  
            background-color: yellow; /* 背景颜色设置为黄色 */  
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); /* 使用clip-path属性裁剪成五角星形状 */  
        }  
  
        /* 大五角星的样式 */  
        .big-star {  
            width: 60px; /* 宽度设置为60像素 */  
            height: 60px; /* 高度设置为60像素 */  
            top: 20px; /* 距离父元素顶部20像素 */  
            left: 20px; /* 距离父元素左边20像素 */  
        }  
  
        /* 小五角星的通用样式，仅设置大小，位置由具体类指定 */  
        .small-star {  
            width: 20px; /* 宽度设置为20像素 */  
            height: 20px; /* 高度设置为20像素 */  
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);   
            transform: rotate(45deg); /* 旋转45度，为了使星星倾斜 */  
        }  
  
        /* 第一颗小五角星的样式 */  
        .star-1 {  
            top: 10px; /* 距离父元素顶部10像素 */  
            left: 90px; /* 距离父元素左边90像素 */  
        }  
  
        /* 第二颗小五角星的样式 */  
        .star-2 {  
            top: 30px; /* 距离父元素顶部30像素 */  
            left: 110px; /* 距离父元素左边110像素 */  
        }  
  
        /* 第三颗小五角星的样式 */  
        .star-3 {  
            top: 60px; /* 距离父元素顶部60像素 */  
            left: 110px; /* 距离父元素左边110像素 */  
        }  
  
        /* 第四颗小五角星的样式 */  
        .star-4 {  
            top: 80px; /* 距离父元素顶部80像素 */  
            left: 90px; /* 距离父元素左边90像素 */  
        }  
    </style>  
</body>  
</html>