پیشنمایش زنده
کد HTML
<div class="fan-container">
<svg class="fan-svg" viewBox="0 0 200 200">
<rect
x="70"
y="160"
width="60"
height="10"
rx="3"
fill="url(#baseGradient)"
></rect>
<rect
x="95"
y="80"
width="10"
height="80"
fill="url(#standGradient)"
></rect>
<circle cx="100" cy="80" r="25" fill="url(#motorGradient)"></circle>
<circle cx="100" cy="80" r="15" fill="#333"></circle>
<g class="fan-trails">
<circle
cx="100"
cy="80"
r="65"
fill="none"
stroke="url(#trailGradient)"
stroke-width="20"
stroke-dasharray="5,95"
opacity="0.7"
></circle>
<circle
cx="100"
cy="80"
r="65"
fill="none"
stroke="url(#trailGradient)"
stroke-width="20"
stroke-dasharray="5,95"
opacity="0.7"
transform="rotate(120 100 80)"
></circle>
<circle
cx="100"
cy="80"
r="65"
fill="none"
stroke="url(#trailGradient)"
stroke-width="20"
stroke-dasharray="5,95"
opacity="0.7"
transform="rotate(240 100 80)"
></circle>
</g>
<g class="fan-blades">
<path
d="M100,80 C105,60 130,50 160,60 C170,65 170,75 160,80 C130,90 105,100 100,80 Z"
fill="url(#bladeGradient)"
></path>
<path
d="M100,80 C105,60 130,50 160,60 C170,65 170,75 160,80 C130,90 105,100 100,80 Z"
fill="url(#bladeGradient)"
transform="rotate(120 100 80)"
></path>
<path
d="M100,80 C105,60 130,50 160,60 C170,65 170,75 160,80 C130,90 105,100 100,80 Z"
fill="url(#bladeGradient)"
transform="rotate(240 100 80)"
></path>
</g>
<circle
cx="100"
cy="80"
r="22"
fill="none"
stroke="url(#grillGradient)"
stroke-width="2"
stroke-dasharray="3,3"
></circle>
<circle
cx="100"
cy="80"
r="15"
fill="none"
stroke="url(#grillGradient)"
stroke-width="2"
stroke-dasharray="3,3"
></circle>
<defs>
<linearGradient id="baseGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#5a5a5a"></stop>
<stop offset="100%" stop-color="#2a2a2a"></stop>
</linearGradient>
<linearGradient id="standGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#6a6a6a"></stop>
<stop offset="100%" stop-color="#3a3a3a"></stop>
</linearGradient>
<radialGradient
id="motorGradient"
cx="50%"
cy="50%"
r="50%"
fx="50%"
fy="50%"
>
<stop offset="0%" stop-color="#888"></stop>
<stop offset="100%" stop-color="#444"></stop>
</radialGradient>
<linearGradient id="bladeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#e0e0e0"></stop>
<stop offset="50%" stop-color="#c0c0c0"></stop>
<stop offset="100%" stop-color="#a0a0a0"></stop>
</linearGradient>
<linearGradient id="grillGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#aaa"></stop>
<stop offset="100%" stop-color="#666"></stop>
</linearGradient>
<linearGradient id="trailGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#e0e0e0" stop-opacity="0"></stop>
<stop offset="50%" stop-color="#f0f0f0" stop-opacity="0.3"></stop>
<stop offset="100%" stop-color="#e0e0e0" stop-opacity="0"></stop>
</linearGradient>
</defs>
</svg>
</div>
کد CSS
.fan-container {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
}
.fan-svg {
width: 100%;
height: 100%;
}
.fan-blades {
animation: rotate-blades 0.8s linear infinite;
transform-origin: 100px 80px;
}
.fan-trails {
animation: rotate-blades 1.2s linear infinite;
transform-origin: 100px 80px;
filter: blur(1px);
}
@keyframes rotate-blades {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media (prefers-color-scheme: dark) {
#bladeGradient stop {
stop-color: #888;
}
#bladeGradient stop:nth-child(2) {
stop-color: #666;
}
#bladeGradient stop:nth-child(3) {
stop-color: #444;
}
#trailGradient stop {
stop-color: #666;
}
#motorGradient stop {
stop-color: #666;
}
#motorGradient stop:nth-child(2) {
stop-color: #333;
}
}