資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 CSS 設計一個可工作的臺式風扇？
CSS 是一種樣式表語言，可用於為網站上的 HTML 元素設定樣式（層疊樣式表）。它用於為您的網站提供更大的視覺衝擊力。它使開發人員可以自由決定您的網站應如何執行。CSS 提高了我們網站的響應速度和互動性。網頁設計師使用 CSS 可以建立動態且引人入勝的網站。透過使用 CSS，可以建立具有大量訪問者的使用者友好型網站，CSS 提供了各種屬性，例如動畫、陰影等，來設定元素的樣式。
在本文中，我們將學習如何透過簡單地使用 HTML 和 CSS 來建立可工作的臺式風扇。我們將使用以下 HTML 標籤：
Polyline – <polyline> 元素使我們能夠構建 HTML <svg> 元素，它是 SVG 圖形的容器元素。任何僅由直線組成的形狀都是藉助 <polyline> 元素建立的。
Svg – 它用作 SVG 圖形的容器元素。
Circle – 它使我們能夠建立圓形。
HTML SVG 圖形
HTML SVG 是可縮放向量圖形的首字母縮寫。使用 HTML SVG（一種模組化語言）描述 XML 中的圖形。XML 中描述了二維向量和混合向量/光柵圖形。它是 W3C 的建議。在 XML 文字檔案中，描述了 SVG 影像及其行為。作為 XML 檔案，SVG 影像可以使用文字編輯器進行設計和編輯，但通常使用 Inkspace 等繪圖程式來執行此操作。
餅圖、X 軸、Y 軸座標系中的二維圖形以及其他向量型別圖經常用於 SVG。SVG 片段的根由 <svg> 元素指定。SVG 檔案中的每個屬性和元素都可以設定動畫。
語法
<svg height= "value" width= "value"></svg>
SVG 圓形
我們可以使用 <circle> 標籤建立圓形圖形。<circle> 標籤中的其他屬性如下：
Stroke – 指定圓形邊框的顏色
Cy – 用於指定圓形中心的 Y 座標
Cx – 用於指定圓形中心的 X 座標
R – 指定圓形的半徑
Fill – 指定圓形顏色
Stroke-width – 指定圓形邊框的寬度
語法
<svg> <circle cx= "value" cy= "value" r= "value" stroke= "value" stroke-width= "value" fill= "value" /> </svg>
示例
<!DOCTYPE html>
<html>
<body>
<h1> Tutorialspoint </h1>
<h2> SVG Circles </h2>
<svg height= "150" width= "150">
<circle cx= "60" cy= "60" r= "50" stroke= "yellow" stroke-width= "4" fill= "green" />
</svg>
</body>
</html>
SVG 折線
<polyline> 元素使開發人員能夠建立僅由直線組成的圖形或形狀。
語法
<polyline points= "Pair of points used to determine the shape" stroke= "color of the stroke" fill= "fill color for colored closed shapes">
屬性
points − 使我們能夠確定形狀
pathLength − 指定路徑的總長度。
示例
<!DOCTYPE html>
<html>
<body>
<h1> Tutorialspoint </h1>
<h2> SVG Polylines </h2>
<svg height= "300" width= "500">
<polyline points= "20,20 50,25 40,40 90,100 120,160 200,170" style= "fill:none; stroke:red; stroke-width:4" />
</svg>
</body>
</html>
可工作的臺式風扇
以下示例演示瞭如何使用 HTML 和 CSS 建立可工作的臺式風扇。
示例
<!DOCTYPE html>
<html>
<head>
<title> Working Table Fan </title>
<style>
h1{
text-align: center;
text-decoration: underline;
color: green;
}
.blade_container{
width: 180px;
height: 180px;
animation: motion .5s ease-in infinite;
margin: auto;
margin-top: 40px;
}
@keyframes motion{
0%{
transform: rotate(360deg);
}
}
.stick{
margin: auto;
margin-top: 0px;
width: 20px;
height: 150px;
background-color: brown;
}
.stand{
width: 150px;
height: 20px;
background-color: brown;
margin: auto;
}
</style>
</head>
<body>
<h1> Working Table Fan </h1>
<section class= "blade_container">
<svg width= "100%" height= "100%" >
<polyline style= "stroke-linejoin:miter; stroke:brown; stroke-width:14; fill: brown;" points= "90 90, 0 90, 90 90, 90 0,90 90,180 90,90 90,90 180" />
<polyline style= "stroke-linejoin:miter; stroke:brown; stroke-width:14; fill: brown;" points= "90 90,30 30,90 90,160 27,90 90,27 160,90 90,160 160" />
<circle cx= "50%" cy= "50%" r= "15%" fill= "brown" >
<animate attributeName= "fill" to= "brown" dur= "8s" repeatCount= "1500"></animate>
</circle>
</svg>
</section>
<div class= "stick"> </div>
<div class= "stand"> </div>
</body>
</html>
321 次瀏覽
