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

9,045次阅读
没有评论

共计 1682 个字符,预计需要花费 5 分钟才能阅读完成。

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

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

页面效果:页面背景的颜色是动态渐变的,可以根据注释自己调动
祝祖国母亲 75 周年生日快乐 - 用 HTML 实现五星红旗

HTML 源代码:

DOCTYPE html>   
html lang="zh-CN">   
head>  
    meta charset="UTF-8">   
    meta name="viewport" content="width=device-width, initial-scale=1.0">   
    title> 五星红旗 title>   
head>  
body>  
    h1> 祝祖国母亲 75 周年生日快乐!!!h1>   
    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;   
            width: 100vw;   
            margin: 0;   
            padding: 0;   
            background-image: linear-gradient(45deg, deepskyblue, #e73038, rgba(255, 213, 0, 0.88), #008071);   
            background-size: 400%;   
            animation: ty 15s infinite;   
        }  
  
        @keyframes ty {  
            0% {  
                background-position: 0% 50%;   
            }  
            50% {  
                background-position: 100% 50%;   
            }  
            100% {  
                background-position: 0% 50%;   
            }  
        }  
  
          
        body, html {  
            height: 100%;   
            margin: 0;   
            display: flex;   
            justify-content: center;   
            align-items: center;   
            background-color: #f0f0f0;   
        }  
  
          
        h1 {  
            font-family: "Edu NSW ACT Foundation", cursive;   
            color: #ee1313;   
            grid-column: 1/-1;   
            margin: 0;   
            font-weight: 500;   
            font-size: 2.7rem;   
        }  
  
          
        .flag {  
            width: 300px;   
            height: 200px;   
            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%);   
        }  
  
          
        .big-star {  
            width: 60px;   
            height: 60px;   
            top: 20px;   
            left: 20px;   
        }  
  
          
        .small-star {  
            width: 20px;   
            height: 20px;   
            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);   
        }  
  
          
        .star-1 {  
            top: 10px;   
            left: 90px;   
        }  
  
          
        .star-2 {  
            top: 30px;   
            left: 110px;   
        }  
  
          
        .star-3 {  
            top: 60px;   
            left: 110px;   
        }  
  
          
        .star-4 {  
            top: 80px;   
            left: 90px;   
        }  
    style>  
body>  
html>

最后,祝所有中华人民共和国公民节日快乐,愿大家天天开心!愿大家的梦想都能照进现实!!愿大家的每一步都坚定而有力!!!

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

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-11-10发表,共计1682字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)