svg+css实现盯着屏幕写代码的墨镜反射动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现盯着屏幕写代码的墨镜反射动画效果代码
代码标签: svg css 盯着 屏幕 写代码 墨镜 反射 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ background:#66c; } 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)" .........完整代码请登录后点击上方下载按钮下载查看
网友评论0