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的建议。在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>

Working Table Fan

下面的例子演示了如何通过使用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>