用 CSS 设计一个工作台?
CSS 是一种样式表语言，可用于设置网站上 HTML 元素的样式(层叠样式表)。CSS 可以为您的网站带来更佳的视觉效果，让开发人员能够自由地决定网站的功能。CSS 提高了网站的响应速度和交互性。网页设计师使用 CSS 有助于创建动态且引人入胜的网站。使用 CSS 可以创建一个用户友好且访客众多的网站，CSS 提供各种属性，例如动画、阴影等，用于设置元素的样式。
在本文中，我们将学习如何使用 HTML 和 CSS 简单地创建一个工作台。我们将使用以下 HTML 标签 -
Polyline(折线) – <polyline> 元素使我们能够构建 HTML <svg> 元素，它是 SVG 图形的容器元素。任何仅由直线组成的形状都是借助 <polyline> 元素创建的。
SVG – 它用作 SVG 图形的容器元素。
Circle(圆形) – 它使我们能够创建圆形。
HTML SVG 图形
HTML SVG 是"可缩放矢量图形 (Scalable Vector Graphics)"的首字母缩写。XML 格式的图形使用 HTML SVG(一种模块化语言)进行描述。二维矢量和矢量/光栅混合图形以 XML 格式进行描述。这是 W3C 的建议。XML 文本文件中描述了 SVG 图片及其行为。作为 XML 文件，SVG 图像可以使用文本编辑器进行设计和编辑，但通常使用 Inkspace 等绘图程序进行操作。
SVG 中经常使用饼图、X 轴和 Y 轴坐标系中的二维图表以及其他矢量类型的图表。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> 元素使开发人员能够创建仅由直线组成的图形或形状。
语法
<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>
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
