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" stro.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0