<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3卡通复古路灯图形特效 - 更多源码WW.96flw.COM</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg class='hifi' viewBox="0 0 880 521" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="lcdFrame">
<rect width="110" height="30" transform="translate(392 429)"/>
</clipPath>
<g id='speaker' filter='url(#blur)' class='hifi__speaker'>
<rect class='hifi__body' x="622" y="241" width="150" height="280" rx="5" />
<path class='hifi__shimmer' d="M622 246C622 243.239 624.239 241 627 241H662V521H627C624.239 521 622 518.761 622 516V246Z"/>
<g class='tweeter'>
<circle class='tweeter__outer' cx="697" cy="440" r="52.5" stroke-width="5"/>
<circle class='tweeter__inner' cx="697" cy="440" r="30" />
</g>
<g class='tweeter'>
<circle class='tweeter__outer' cx="697" cy="331" r="37.5" stroke-width="5"/>
<circle class='tweeter__inner' cx="697" cy="331" r="21.8182"/>
</g>
</g>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0" />
</filter>
</defs>
<use class='speaker speaker--left' href="#speaker"/>
<use class='speaker speaker--right' href="#speaker" transform='translate(-500, 0)'/>
<g class='stack'>
<rect x="353" y="516" width="30" height="5" class='button'/>
<rect x="353" y="516" width="10" height="5" class='shimmer'/>
<rect x="510" y="516" width="30" height="5" class='button'/>
<rect x="510" y="516" width="10" height="5" class='shimmer'/>
<rect class='hifi__body' x="322" y="416" width="250" height="100" rx="5" />
<path class='hifi__shimmer' d="M322 421C322 418.239 324.239 416 327 416H362V516H327C324.239 516 322 513.761 322 511V421Z"/>
<g class='slider'>
<path d="M344 436V496" class='stroked' stroke-width="2" stroke-linecap="round"/>
<rect class='slider__handle button' x="337" y="444" width="14" height="5" rx="2" />
</g>
<g class='lcd' clip-path="url(#lcdFrame)">
<path class='lcd__panel stroked' d="M394 430H500C500.552 430 501 430.448 501 431V457C501 457.552 500.552 458 500 458H394C393.448 458 393 457.552 393 457V431C393 430.448 393.448 430 394 430Z" stroke-width="2"/>
<path class='lcd__line stroked' d="M411 438H447" stroke-width="6"/>
<path class='lcd__text' d="M407.664 446.24C407.925 446.24 408.163 446.28 408.376 446.36C408.589 446.44 408.771 446.555 408.92 446.704C409.075 446.853 409.192 447.032 409.272 447.24C409.357 447.443 409.4 447.669 409.4 447.92C409.4 448.171 409.357 448.4 409.272 448.608C409.187 448.811 409.067 448.987 408.912 449.136C408.763 449.285 408.581 449.4 408.368 449.48C408.155 449.56 407.92 449.6 407.664 449.6H406.44V452H405.72V446.24H407.664ZM406.44 448.96H407.664C407.963 448.96 408.203 448.867 408.384 448.68C408.565 448.488 408.656 448.235 408.656 447.92C408.656 447.605 408.565 447.355 408.384 447.168C408.203 446.976 407.963 446.88 407.664 446.88H406.44V448.96ZM410.277 450.72C410.277 450.512 410.312 450.325 410.381 450.16C410.456 449.989 410.56 449.845 410.693 449.728C410.832 449.611 410.997 449.52 411.189 449.456C411.381 449.392 411.597 449.36 411.837 449.36H413.157V449C413.157 448.728 413.066 448.517 412.885 448.368C412.709 448.213 412.453 448.136 412.117 448.136C411.872 448.136 411.661 448.181 411.485 448.272C411.309 448.363 411.192 448.488 411.133 448.648H410.413C410.488 448.301 410.68 448.027 410.989 447.824C411.298 447.621 411.68 447.52 412.133 447.52C412.677 447.52 413.104 447.648 413.413 447.904C413.722 448.155 413.877 448.507 413.877 448.96V452H413.221V451.16H413.157C413.088 451.443 412.922 451.667 412.661 451.832C412.405 451.997 412.093 452.08 411.725 452.08C411.282 452.08 410.93 451.957 410.669 451.712C410.408 451.467 410.277 451.136 410.277 450.72ZM410.997 450.704C410.997 450.949 411.074 451.141 411.229 451.28C411.384 451.419 411.602 451.488 411.885 451.488C412.066 451.488 412.234 451.464 412.389 451.416C412.544 451.368 412.677 451.301 412.789 451.216C412.906 451.125 412.997 451.021 413.061 450.904C413.125 450.787 413.157 450.659 413.157 450.52V449.92H411.853C411.586 449.92 411.376 449.989 411.221 450.128C411.072 450.267 410.997 450.459 410.997 450.704ZM416.17 447.6V448.36H416.25C416.319 448.099 416.463 447.893 416.682 447.744C416.9 447.595 417.164 447.52 417.474 447.52C417.938 447.52 418.3 447.667 418.562 447.96C418.828 448.248 418.962 448.645 418.962 449.152V449.4H418.242V449.24C418.242 448.893 418.154 448.627 417.978 448.44C417.807 448.248 417.562 448.152 417.242 448.152C416.927 448.152 416.676 448.251 416.49 448.448C416.303 448.64 416.21 448.904 416.21 449.24V452H415.49V447.6H416.17ZM419.871 447.6H421.151V446.24H421.871V447.6H423.591V448.256H421.871V450.864C421.871 451.013 421.916 451.131 422.007 451.216C422.103 451.301 422.231 451.344 422.391 451.344H423.511V452H422.391C422.012 452 421.711 451.896 421.487 451.688C421.263 451.48 421.151 451.205 421.151 450.864V448.256H419.871V447.6ZM424.564 447.6H425.363L426.388 450.168C426.436 450.291 426.473 450.405 426.5 450.512C426.532 450.619 426.556 450.712 426.572 450.792C426.593 450.893 426.606 450.984 426.612 451.064H426.668C426.673 450.984 426.684 450.896 426.7 450.8C426.716 450.715 426.737 450.619 426.764 450.512C426.796 450.405 426.833 450.291 426.876 450.168L427.836 447.6H428.612L426.42 453.36H425.652L426.268 451.68L424.564 447.6ZM436.229 452.08C435.957 452.08 435.712 452.04 435.493 451.96C435.28 451.88 435.096 451.765 434.941 451.616C434.792 451.467 434.675 451.285 434.589 451.072C434.509 450.859 434.469 450.621 434.469 450.36V447.88C434.469 447.619 434.509 447.381 434.589 447.168C434.675 446.955 434.792 446.773 434.941 446.624C435.096 446.475 435.28 446.36 435.493 446.28C435.712 446.2 435.957 446.16 436.229 446.16C436.731 446.16 437.133 446.299 437.437 446.576C437.747 446.848 437.931 447.229 437.989 447.72H437.269C437.237 447.432 437.128 447.208 436.941 447.048C436.76 446.883 436.523 446.8 436.229 446.8C435.909 446.8 435.656 446.896 435.469 447.088C435.283 447.28 435.189 447.544 435.189 447.88V450.36C435.189 450.696 435.28 450.96 435.461 451.152C435.648 451.344 435.904 451.44 436.229 451.44C436.523 451.44 436.76 451.36 436.941 451.2C437.128 451.035 437.237 450.808 437.269 450.52H437.989C437.931 451.011 437.747 451.395 437.437 451.672C437.133 451.944 436.731 452.08 436.229 452.08ZM440.978 452.08C440.706 452.08 440.461 452.04 440.242 451.96C440.029 451.88 439.845 451.765 439.69 451.616C439.541 451.467 439.423 451.285 439.338 451.072C439.258 450.859 439.218 450.621 439.218 450.36V449.24C439.218 448.973 439.258 448.736 439.338 448.528C439.423 448.315 439.541 448.133 439.69 447.984C439.845 447.835 440.029 447.72 440.242 447.64C440.461 447.56 440.706 447.52 440.978 447.52C441.522 447.52 441.951 447.672 442.266 447.976C442.581 448.28 442.738 448.699 442.738 449.232V450.36C442.738 450.893 442.581 451.315 442.266 451.624C441.957 451.928 441.527 452.08 440.978 452.08ZM439.938 450.36C439.938 450.696 440.029 450.96 440.21 451.152C440.397 451.344 440.653 451.44 440.978 451.44C441.298 451.44 441.551 451.344 441.738 451.152C441.925 450.96 442.018 450.696 442.018 450.36V449.24C442.018 448.904 441.925 448.64 441.738 448.448C441.551 448.256 441.298 448.16 440.978 448.16C440.658 448.16 440.405 448.256 440.218 448.448C440.031 448.64 439.938 448.904 439.938 449.24V450.36ZM444.951 447.6V448.36H445.031C445.1 448.099 445.244 447.893 445.463 447.744C445.682 447.595 445.946 447.52 446.255 447.52C446.719 447.52 447.082 447.667 447.343 447.96C447.61 448.248 447.743 448.645 447.743 449.152V449.4H447.023V449.24C447.023 448.893 446.935 448.627 446.759 448.44C446.588 448.248 446.343 448.152 446.023 448.152C445.708 448.152 445.458 448.251 445.271 448.448C445.084 448.64 444.991 448.904 444.991 449.24V452H444.271V447.6H444.951ZM448.756 449.2C448.756 448.944 448.791 448.712 448.86 448.504C448.929 448.296 449.028 448.12 449.156 447.976C449.289 447.832 4
