玻璃/折射图像效果HTML/CSS
我对这一切还不熟悉，所以请容忍我 我正在努力实现一种图像效果，类似于由圆形玻璃造成的折射。我知道最简单的方法是使用和学习JS，这将最终解决我所有的问题；然而，我一直在寻找解决办法，这就是为什么我会在这里 所以，我试图复制的效果是SKY不久前所做的。我知道他们将使用画布并从那里控制一切 我的想法是，先使用背景图像，然后使用相同背景图像的SVG掩码，将第二个背景图像向下移动5-10px，并将大小增加2-3%，然后添加过滤器：模糊（3px）。我有一个第二个图像的标志，我试图使用已经有一个'玻璃'期待它，所以，这解决了反射 我正在努力解决的问题是SVG掩码。我似乎无法让它正确显示背景图像，或与徽标对齐 这是我到目前为止所拥有的。（请原谅编码不好，我还在学习） 非常感谢您的任何帮助玻璃/折射图像效果HTML/CSS,html,css,svg,effect,aero-glass,Html,Css,Svg,Effect,Aero Glass,我对这一切还不熟悉，所以请容忍我 我正在努力实现一种图像效果，类似于由圆形玻璃造成的折射。我知道最简单的方法是使用和学习JS，这将最终解决我所有的问题；然而，我一直在寻找解决办法，这就是为什么我会在这里 所以，我试图复制的效果是SKY不久前所做的。我知道他们将使用画布并从那里控制一切 我的想法是，先使用背景图像，然后使用相同背景图像的SVG掩码，将第二个背景图像向下移动5-10px，并将大小增加2-3%，然后添加过滤器：模糊（3px）。我有一个第二个图像的标志，我试图使用已经有一个'玻璃'期待它
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin:0;
padding: 0;
background-image:url(http://jforthdesigns.co.uk/images/BG002.jpg);
background-attachment: fixed;
background-position: center;
width:100%;
margin:0;
height: 3000px;
}
.logo {
width:50%;
position:absolute;
top: 350px;
left: 25%;
right:25%;
clear:none;
}
#wrapper {
text-align: center;
width: 100%;
padding-top: 300px;
}
#image {
mask: url(#mask);
-webkit-mask: url(http://jforthdesigns.co.uk/images/mask.svg);
}
.st0 {
fill:#000000;
stroke:none;
}
</style>
</head>
<body>
<div>
<div id="wrapper">
<img src="http://jforthdesigns.co.uk/images/BeamGlass.png" class="logo">
<img id="image" class="logo" src="http://jforthdesigns.co.uk/images/BG002.jpg">
</div>
</div>
<svg width="1024" height="512">
<mask id="mask">
<path class="st0" d="M206.7,153.4c55,55,144.5,55,199.5,0c0.9-0.9,1.8-1.8,2.2-2.3c1.2-1.3,2.4-2.5,3.5-3.9l-18.2-18.2
c-1.3,1.6-2.8,3.1-4.2,4.7c-0.5,0.5-0.9,1-1.4,1.5c-45,45-118.2,45-163.1,0l0,0L206.7,153.4L206.7,153.4z"/>
<path class="st0" d="M231.3,128.8c41.4,41.4,108.8,41.4,150.2,0c2-2,3.9-4,5.6-6.2L369,104.4c-1.7,2.2-3.6,4.2-5.6,6.2
c-31.4,31.4-82.5,31.4-113.9,0l0,0L231.3,128.8L231.3,128.8z"/>
<path class="st0" d="M256.3,103.8c27.6,27.6,72.6,27.6,100.2,0c2-2,3.8-4.1,5.5-6.3l-18.3-18.3c-1.5,2.3-3.4,4.5-5.4,6.5
c-17.6,17.6-46.3,17.6-63.9,0l0,0L256.3,103.8L256.3,103.8z"/>
<path class="st0" d="M122.3,143.3c0,29.7-26.6,46.2-69.6,46.2c-14.2,0-36.1-1.8-36.6-1.8l0-145.9c0.1,0,18.6-4.2,39.3-4.2
c34,0,55.1,11.3,55.1,35.8c0,13.9-6.8,26-19.2,33.8C111,112.2,122.3,123.7,122.3,143.3 M54,171.3c29,0,43.9-9.8,43.9-28.4
c0-18.9-14.3-24.8-39.5-24.8c-6.2,0-12.9,0.4-18.5,0.9v51.5C44.4,171,49.3,171.3,54,171.3 M57.9,55.8c-6,0-12.4,0.8-18.1,1.7v44.8
l9.8,0.2c26.3,0,37.5-10.7,37.5-26.6C87.1,60.9,76,55.8,57.9,55.8"/>
<path class="st0" d="M213.1,39.7c0,0,2,2.7,2,5.1c0,2.1-1.3,8.7-1.8,13.4h-59.5V103h52.3l-1.4,13c-0.3,3.1-2.2,4.9-5.3,4.9h-45.5
v48.3h61.4c0,0,2,2.7,2,5.1c0,2.1-1.3,8.7-1.8,13.4h-80.8c-2.4,0-5.1-2.1-5.1-2.1v-146H213.1z"/>
<path class="st0" d="M584.6,187.7c-7.4,0-16.5,0.7-19.8,0.7c-2.4,0-5.1-2.1-5.1-2.1l-14.7-95.8c-0.6-3.6-0.8-9.6-0.8-15.1
c-0.9,5.2-2.1,10.8-3.4,14.5l-35,97.8c-6.2,0-13.1,0.7-15.7,0.7c-2.4,0-5.1-2.1-5.1-2.1l-34.3-95.7c-1-2.9-1.9-7.4-2.5-11.5
c-0.2,3.9-0.5,8-0.8,10.4l-15.2,98.2c-6.3,0-14.1,0.7-16.9,0.7c-2.4,0-5.1-2.1-5.1-2.1L432.1,48c0.7-4.3-0.5-8.3-0.5-8.3
c7,0,16.7-0.6,19-0.6c2.4,0,5.1,2,5.1,2l38,98.8c1.7,4.2,3,10,4,15.1c1.1-5.3,2.5-11.2,3.8-14.9l34.1-93.6c1.1-3,0.8-6.8,0.8-6.8
c6,0,16.3-0.6,19.5-0.6c2.4,0,5.1,2,5.1,2L584.6,187.7z"/>
<path class="st0" d="M339.1,55.8c0,16.5-13.4,29.9-29.9,29.9s-29.9-13.4-29.9-29.9c0-16.5,13.4-29.9,29.9-29.9
S339.1,39.3,339.1,55.8"/>
</mask>
</svg>
</body>
</html>
身体{
保证金：0；
填充：0；
背景图片：url(http://jforthdesigns.co.uk/images/BG002.jpg);
背景附件：固定；
背景位置：中心；
宽度：100%；
保证金：0；
高度：3000px；
}
.标志{
宽度：50%；
位置：绝对位置；
顶部：350px；
左：25%；
右：25%；
明确：无；
}
#包装纸{
文本对齐：居中；
宽度：100%；
填充顶部：300px；
}
#形象{
掩码：url（#掩码）；
-webkit掩码：url(http://jforthdesigns.co.uk/images/mask.svg);
}
.st0{
填写：#000000；
中风：无；
}