En este artículo, diseñaremos un ventilador de mesa de trabajo utilizando HTML y CSS .
Lista de etiquetas HTML utilizadas:
- Polilínea: el elemento <polyline> se usa para crear el elemento HTML <svg>, que es un contenedor para gráficos SVG de cualquier forma que consista solo en líneas rectas.
- div : la etiqueta <div> define una división o una sección en un documento HTML.
- svg : el elemento HTML <svg> es un contenedor para gráficos SVG
- círculo : el elemento HTML <circle> se utiliza para crear un círculo
- estilo : el elemento HTML <estilo> se utiliza para proporcionar CSS interno.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.blade_container {
width: 180px;
height: 180px;
margin: auto;
margin-top: 50px;
animation: blade 1s linear infinite;
}
@keyframes blade {
0% {
transform: rotate(360deg);
}
}
.rode {
width: 15px;
height: 150px;
background-color: black;
margin: auto;
margin-top: 0px;
}
.main_container {
background-color: #308D46;
border-radius: 50%;
height: 180px;
width: 180px;
margin: auto;
}
</style>
</head>
<body>
<center>
<h3 style="color:green">Its Geek Time</h3>
<div class="main_container">
<div class="blade_container">
<svg width="100%" height="100%">
<polyline style="stroke-linejoin:miter;
stroke:white; stroke-width:12;
fill:white;" points=
"90 90, 0 90, 90 90,
90 0,90 90,180 90,
90 90,90 180,90 90,
27 27,90 90,
153 27,90 90,
27 153,
90 90,
153 153" />
</svg>
</div>
</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210921173505/bg.png"
style="z-index:-1;">
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA