css+svg实现图片浮雕效果代码-html代码-BFW代码库

css+svg实现图片浮雕效果代码

代码语言：html

所属分类：其他

代码描述：css+svg实现图片浮雕效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
  background: #000;
  user-select: none;
  overflow: hidden;
}

.centered {
  position: fixed;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
}

img {
  border-radius: 2rem;
  filter: url(#emboss-effect);
}

.btn-social-cp {
  --dim:30px;
  position: fixed;
  bottom: var(--dim);
  right: var(--dim);
  height: var(--dim);
  width: var(--dim);
  filter: url(#glow-drop-shadow);
}
.btn-social-cp svg path {
  transition: all 2s ease;
  fill: tomato;
}
.btn-social-cp:hover svg path {
  fill: #fff;
}
</style>

  
  
</head>

<body translate="no">
  <svg width="1080" height="1080" viewBox="0 0 1080 1080" version="1.1" id="svg1" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <defs id="defs1">
    <filter style="color-interpolation-filters:sRGB" id="emboss-effect" x="0" y="0">
      <feGaussianBlur result="result3" stdDeviation="4" in="SourceGraphic" id="feGaussianBlur1" />
      <feComponentTransfer in="result3" result="result1" id="feComponentTransfer1">
        <feFuncR tableValues="0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1" type="discrete" id="feFuncR1" />
        <feFuncG tableValues="0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1" type="disc.........完整代码请登录后点击上方下载按钮下载查看