共计 1682 个字符,预计需要花费 5 分钟才能阅读完成。
在这特别的日子里,让我们共同祝愿祖国母亲生日快乐,繁荣昌盛!愿您的明天更加美好!!!
同时,也向所有为祖国建设和发展做出贡献的人们致以崇高的敬意和衷心的感谢。是你们的辛勤付出和无私奉献,才换来了祖国今天的辉煌成就。让我们携手共进,共同创造祖国更加美好的未来~ ~ ~
页面效果:页面背景的颜色是动态渐变的,可以根据注释自己调动
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 实现五星红旗
正文完