（实际上是动态效果，需要的自行复制）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>编码墨镜</title>
<style>
body{background:#66c;background-image:linear-gradient(-25deg,#66c,#fff);height:100vh;margin:0 auto;overflow:hidden}svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:400px}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 40 16">
<defs>
<clipPath id="glasses-cut-out">
<path d="M 4 8 Q 3 3 6 2 Q 11 1 15.5 2 Q 20 4 15 9 Q 6 18 4 8
M 36 8 Q 37 3 34 2 Q 29 1 24.5 2 Q 20 4 25 9 Q 34 18 36 8" />
</clipPath>
</defs>
<path d="M 4 8 Q 3 3 6 2 Q 11 1 15.5 2 Q 20 4 15 9 Q 6 18 4 8
M 36 8 Q 37 3 34 2 Q 29 1 24.5 2 Q 20 4 25 9 Q 34 18 36 8" stroke="#111" stroke-width="1.5"
fill="#111" />
<path d="M 14 1.5 H 25 V 1.5 H 14" stroke="#111" stroke-width="0.7" />
<path d="M 18 5 C 18 2.5 22 2.5 22 5" stroke="#111" stroke-width="0.7" fill="none" />
<rect x="0" y="0" height="100%" width="100%" clip-path="url(#glasses-cut-out)" fill="#222" />
<rect x="0" height="1.2" width="14" rx=".2" clip-path="url(#glasses-cut-out)" fill="green">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" />
</rect>
<rect x="20" height="1.2" width="14" rx=".2" clip-path="url(#glasses-cut-out)" fill="green">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" />
</rect>
<rect x="0" height="1.2" width="16" rx=".2" clip-path="url(#glasses-cut-out)" fill="blue">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-.2s" />
</rect>
<rect x="20" height="1.2" width="16" rx=".2" clip-path="url(#glasses-cut-out)" fill="blue">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-.2s" />
</rect>
<rect x="0" height="1.2" width="16" rx=".2" clip-path="url(#glasses-cut-out)" fill="orange">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-.4s" />
</rect>
<rect x="20" height="1.2" width="15" rx=".2" clip-path="url(#glasses-cut-out)" fill="orange">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-.4s" />
</rect>
<rect x="0" height="1.2" width="12" rx=".2" clip-path="url(#glasses-cut-out)" fill="blue">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-.6s" />
</rect>
<rect x="20" height="1.2" width="12" rx=".2" clip-path="url(#glasses-cut-out)" fill="blue">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-.6s" />
</rect>
<rect x="0" height="1.2" width="14" rx=".2" clip-path="url(#glasses-cut-out)" fill="green">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-.8s" />
</rect>
<rect x="20" height="1.2" width="14" rx=".2" clip-path="url(#glasses-cut-out)" fill="green">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-.8s" />
</rect>
<rect x="0" height="1.2" width="13" rx=".2" clip-path="url(#glasses-cut-out)" fill="purple">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-1s" />
</rect>
<rect x="20" height="1.2" width="13" rx=".2" clip-path="url(#glasses-cut-out)" fill="purple">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-1s" />
</rect>
<rect x="13.5" height="1.2" width="4" rx=".2" clip-path="url(#glasses-cut-out)" fill="purple">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-1s" />
</rect>
<rect x="33.5" height="1.2" width="4" rx=".2" clip-path="url(#glasses-cut-out)" fill="purple">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-1s" />
</rect>
<rect x="0" height="1.2" width="15" rx=".2" clip-path="url(#glasses-cut-out)" fill="blue">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-1.2s" />
</rect>
<rect x="20" height="1.2" width="15" rx=".2" clip-path="url(#glasses-cut-out)" fill="blue">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-1.2s" />
</rect>
<rect x="0" height="1.2" width="13" rx=".2" clip-path="url(#glasses-cut-out)" fill="orange">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-1.4s" />
</rect>
<rect x="20" height="1.2" width="13" rx=".2" clip-path="url(#glasses-cut-out)" fill="orange">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-1.4s" />
</rect>
<rect x="0" height="1.2" width="13.5" rx=".2" clip-path="url(#glasses-cut-out)" fill="green">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-1.6s" />
</rect>
<rect x="20" height="1.2" width="13.5" rx=".2" clip-path="url(#glasses-cut-out)" fill="green">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-1.6s" />
</rect>
<rect x="0" height="1.2" width="16" rx=".2" clip-path="url(#glasses-cut-out)" fill="purple">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-1.8s" />
</rect>
<rect x="20" height="1.2" width="16" rx=".2" clip-path="url(#glasses-cut-out)" fill="purple">
<animate attributeName="y" from="16" to="-4" dur="2s" repeatCount="indefinite" begin="-1.8s" />
</rect>
<path d="M 13 0 L 9 15 H 6 L 10 0 M 9 0 L 5 15 H 4 L 8 0" fill="rgba(255,255,255,0.4)"
clip-path="url(#glasses-cut-out)" />
</svg>
</body>
</html>