svg+css实现倒影效果代码-html代码-BFW代码库

svg+css实现倒影效果代码

代码语言：html

代码描述：svg+css实现倒影效果代码

代码标签： svg css 倒影

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  --bg: #g1g1g1;
  display: flex;
  justify-content: center;
  padding: 2rem;
  min-height: 100vh;
  background: var(--bg);
}

svg {
  max-height: 40vh;
  -webkit-box-reflect: below -2px linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
}
</style>

</head>

<body  >

  <svg width="313" height="466" viewBox="0 0 313 466" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M4.07656 182.776C8.81619 177.853 21.5766 182.776 21.5766 182.776C18.5397 115.207 18.1205 51.0008 88.0765 15.2763C141.274 -11.89 216.061 -3.08253 255.577 43.7763C291.58 161.044 157.576 274.776 19.5766 217.776C9.58049 213.648 -7.97917 195.3 4.07656 182.776Z" fill="#91A23A" />
	<path d="M150 351C150 351 147.728 376.219 147 389.5C145.642 414.289 145 448.5 145 448.5" stroke="#D0B597" stroke-width="24" stroke-linec.........完整代码请登录后点击上方下载按钮下载查看