使用CSS来设计一个工作的台式风扇

CSS是一种样式表语言，可以用来为网站上的HTML元素添加样式（层叠样式表）。它可以增加你的网站的视觉效果，为开发者提供自由决定你的网站应该如何运作的能力。CSS改善了我们的网站的响应性和交互性。使用CSS的网页设计师可以创建动态和吸引人的网站。使用CSS可以创建用户友好的、拥有大量访问量的网站，它提供了各种属性，如动画、阴影等来为元素添加样式。

在本文中，我们将学习如何使用简单的HTML和CSS创建一个工作的台式风扇。我们将使用以下HTML标签:

Polyline - <polyline>元素可以帮助我们构建HTML的<svg>元素，它是一个用于SVG图形的容器元素。只由直线构成的任何形状都可以使用<polyline>元素创建。
Svg - 它作为SVG图形的容器元素。
Circle - 它可以帮助我们创建圆形。

HTML SVG图形

HTML SVG是一个代表可伸缩矢量图形的缩写。使用XML描述了HTML SVG中的图形，它是一种模块化语言。XML描述了二维矢量图和混合矢量/光栅图。这是W3C的建议。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>