数据结构
网络
关系数据库管理系统
操作系统
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 次浏览
