資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 HTML 和 CSS 建立印度國旗
要使用 HTML 和 CSS 建立印度國旗，我們需要對 CSS 有很好的理解。印度國旗有三種顏色：橙色、白色和綠色，以及中間的阿育王法輪。
在這篇文章中，我們將逐步建立印度國旗。首先製作旗杆，然後是三色旗，最後是旋轉的阿育王法輪，所有這些都只使用 HTML 和 CSS。稍後我們將使用波浪動畫和旗幟移動來為我們的國旗製作動畫。以下是我們將遵循的步驟
使用 HTML 和 CSS 建立印度國旗的步驟
我們將使用以下五個步驟來建立印度國旗，如下所示
建立國旗的基本結構
我們使用了以下步驟來建立國旗的結構
- 我們使用了帶有 container 類的 div 元素，它將旗杆和國旗組合在一起。
- 我們使用了 div 元素來建立旗杆和國旗。
- 我們使用了帶有 wave 類的 div 元素，它負責新增動畫。
- 我們使用了帶有 div 的 wheel 類來建立法輪的圓圈，並使用了十二個 span 元素來建立法輪的二十四根輻條。
以下是上述步驟的 HTML 實現
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Create the Indian Flag using HTML and CSS
</title>
</head>
<body>
<div class="container">
<div class="pole"></div>
<div class="flag tricolor">
<div class="wave"></div>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</body>
</html>
設計三色旗和旗杆
在此步驟中，我們將向國旗新增三色旗，並建立連線到國旗的旗杆。
- 要設計旗杆，我們使用 CSS 的 height 和 width 屬性設定其尺寸，對於彎曲的末端，我們使用了 CSS 的 border-top-left-radius、border-bottom-left-radius 和 border-bottom-right-radius 屬性，並使用 background 屬性將其顏色設定為黑色。
- 要設計國旗，我們使用了 flag 類來設定尺寸、position 和 box-shadow。
- 要向國旗新增顏色，我們使用了 tricolor 類，它使用 linear-gradient 向國旗新增橙色、白色和綠色。它使用 網格佈局 將其子元素（即輪子）保持在中心，使用 place-items 屬性。
以下是上述步驟的 CSS 實現
.pole {
height: 450px;
width: 10px;
background: black;
border-top-left-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.flag {
position: relative;
width: 300px;
height: 200px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
overflow: hidden;
transform-origin: left center;
}
.tricolor {
background: linear-gradient(#ff9933 33%,
#fff 33%, #fff 66%, green 0);
display: grid;
place-items: center;
}
新增輪子和輻條
在此步驟中，我們使用了 wheel 和 line 類來設計阿育王法輪。
- 我們使用了 wheel 類使用 border 建立輪子，然後使用 border-radius 將矩形 div 轉換為圓形。
- 我們使用了 line 類來建立輻條並設定輻條的尺寸。
- 我們對 line 類使用了 nth-child() 偽選擇器，它選擇引數中指定的子元素並使用 transform 屬性應用 15 度旋轉。
- 我們使用了 nth-child() 來選擇並應用 rotation 到十二個 span 元素，從而建立二十四根輻條。
以下是上述步驟的 CSS 實現
.wheel {
height: 50px;
width: 50px;
border: 1px solid darkblue;
border-radius: 50%;
position: relative;
margin: 0 auto;
}
.wheel .line {
height: 100%;
width: 1px;
display: inline-block;
position: absolute;
left: 50%;
background: darkblue;
}
.line:nth-child(1) {
transform: rotate(15deg)
}
.line:nth-child(2) {
transform: rotate(30deg)
}
.line:nth-child(3) {
transform: rotate(45deg)
}
.line:nth-child(4) {
transform: rotate(60deg)
}
.line:nth-child(5) {
transform: rotate(75deg)
}
.line:nth-child(6) {
transform: rotate(90deg)
}
.line:nth-child(7) {
transform: rotate(105deg)
}
.line:nth-child(8) {
transform: rotate(120deg)
}
.line:nth-child(9) {
transform: rotate(135deg)
}
.line:nth-child(10) {
transform: rotate(150deg)
}
.line:nth-child(11) {
transform: rotate(165deg)
}
.line:nth-child(12) {
transform: rotate(180deg)
}
為法輪新增動畫
在此步驟中，我們將向阿育王法輪新增 animation，這將向法輪新增旋轉動畫。
- 我們在 wheel 類上使用了動畫屬性，它定義了 animation-name、animation-timing-function、animation-duration 和 animation-iteration-count。
- CSS animation-name 定義動畫名稱，使用 animation-duration 控制動畫速度，animation-iteration-count 確保動畫無限執行。
- 我們使用了 @keyframes chakra，它將法輪從動畫開始時的 0 度旋轉到動畫結束時的 360 度。
以下是上述步驟的 CSS 實現
.wheel{
animation-name: chakra;
animation-timing-function: linear;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes chakra {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
為國旗新增動畫
在此步驟中，我們已將動畫應用於國旗。
- 我們在 flag 類中使用了動畫屬性來定義動畫名稱 wave。
- 我們使用了 @keyframes wave，它負責國旗的移動，其中 perspective() 屬性提供 3D 深度，而 rotateY() 負責透過在 y 方向上旋轉國旗使其移動。
- 我們使用了 wave 類使用線性漸變 gradient 設定波浪的角度和動畫屬性來設定動畫，從而定義國旗的波浪動畫。
- 我們使用了 @keyframes waves，它透過將漸變條紋從 -400px 移動到 800px 來設定移動波浪。
以下是上述步驟的 CSS 實現
.flag{
animation-name: wave;
animation-timing-function: ease-in-out;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes wave {
0% {
transform: perspective(600px) rotateY(0deg);
}
25% {
transform: perspective(600px) rotateY(10deg);
}
50% {
transform: perspective(600px) rotateY(-10deg);
}
75% {
transform: perspective(600px) rotateY(10deg);
}
100% {
transform: perspective(600px) rotateY(0deg);
}
}
.wave {
position: absolute;
height: 100%;
width: 100%;
background-image: linear-gradient(45deg,
rgba(89, 72, 21, 0) 39%,
rgba(250, 245, 245, 0.8474025974025974) 46%,
rgba(89, 72, 21, 0) 53%);
animation-name: waves;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes waves {
0% {
background-position: -400px 0px,-400px 0px,
-400px 0px, -400px 0px;
}
100% {
background-position: 800px 0px,800px 0px,
800px 0px, 800px 0px;
}
}
完整示例程式碼
以下是使用 HTML 和 CSS 建立印度國旗的完整示例程式碼。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Create the Indian Flag using HTML and CSS
</title>
<style>
* {
box-sizing: border-box;
margin: 0;
}
body {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}
.container {
display: flex;
}
.pole {
height: 450px;
width: 10px;
background: black;
border-top-left-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.flag {
position: relative;
width: 300px;
height: 200px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
overflow: hidden;
transform-origin: left center;
animation-name: wave;
animation-timing-function: ease-in-out;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.tricolor {
background: linear-gradient(#ff9933 33%,
#fff 33%, #fff 66%, green 0);
display: grid;
place-items: center;
}
.wheel {
height: 50px;
width: 50px;
border: 1px solid darkblue;
border-radius: 50%;
position: relative;
margin: 0 auto;
animation-name: chakra;
animation-timing-function: linear;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.wheel .line {
height: 100%;
width: 1px;
display: inline-block;
position: absolute;
left: 50%;
background: darkblue;
}
@keyframes chakra {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes wave {
0% {
transform: perspective(600px) rotateY(0deg);
}
25% {
transform: perspective(600px) rotateY(10deg);
}
50% {
transform: perspective(600px) rotateY(-10deg);
}
75% {
transform: perspective(600px) rotateY(10deg);
}
100% {
transform: perspective(600px) rotateY(0deg);
}
}
.wave {
position: absolute;
height: 100%;
width: 100%;
background-image: linear-gradient(45deg,
rgba(89, 72, 21, 0) 39%,
rgba(250, 245, 245, 0.8474025974025974) 46%,
rgba(89, 72, 21, 0) 53%);
animation-name: waves;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes waves {
0% {
background-position: -400px 0px,-400px 0px,
-400px 0px, -400px 0px;
}
100% {
background-position: 800px 0px,800px 0px,
800px 0px, 800px 0px;
}
}
.line:nth-child(1) {
transform: rotate(15deg)
}
.line:nth-child(2) {
transform: rotate(30deg)
}
.line:nth-child(3) {
transform: rotate(45deg)
}
.line:nth-child(4) {
transform: rotate(60deg)
}
.line:nth-child(5) {
transform: rotate(75deg)
}
.line:nth-child(6) {
transform: rotate(90deg)
}
.line:nth-child(7) {
transform: rotate(105deg)
}
.line:nth-child(8) {
transform: rotate(120deg)
}
.line:nth-child(9) {
transform: rotate(135deg)
}
.line:nth-child(10) {
transform: rotate(150deg)
}
.line:nth-child(11) {
transform: rotate(165deg)
}
.line:nth-child(12) {
transform: rotate(180deg)
}
</style>
</head>
<body>
<div class="container">
<div class="pole"></div>
<div class="flag tricolor">
<div class="wave"></div>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</body>
</html>
結論
我們學習並理解了如何使用 HTML 和 CSS 建立印度國旗。我們使用了五個步驟，即 建立國旗的基本結構、設計三色旗和旗杆、新增輪子和輻條、為法輪新增動畫和 為國旗新增動畫。使用這五個步驟，我們建立了帶有波浪動畫的印度國旗。
更新於： 2024 年 8 月 14 日
11K+ 次檢視
廣告