svg+css实现倒影效果代码
代码语言：html
所属分类：布局界面
代码描述：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-linecap="round" stroke-linejoin="round" />
<path d="M216.64 351.087C216.64 351.087 215.624 376.388 214.624 389.651C212.757 414.407 208.958 448.413 208.958 448.413" stroke="#D0B597" stroke-width="24" stroke-linecap="round" stroke-linejoin="round" />
<path d="M218 237.5C218 237.5 230.162 262.983 235.754 285.426C240.193 303.236 242.964 331.87 242.964 331.87" stroke="#D0B597" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
<path d="M225.5 275.5C231.666 274.799 241 272 241 272L229 236.5C229 236.5 222.755 229.333 217.5 229.5C209.967 229.739 206 245 206 245L209 275.5C209 275.5 219.098 276.227 225.5 275.5Z" fill="#91A23A" />
<path d="M147 358C136.968 356.726 121.5 353.5 121.5 353.5C121.5 353.5 120.325 343.336 121.5 337C122.936 329.261 129.5 318.5 129.5 318.5C129.5 318.5 166.816 326.722 191 326C207.341 325.512 232.5 320.5 232.5 320.5C232.5 320.5 237.755 330.187 239 337C240.159 343.339 239 353.5 239 353.5L214.5 358C214.5 358 173.15 361.321 147 358Z" fill="#91A23A" />
<path d="M188.5 314C166.958 314.592 133.5 307 133.5 307C133.5 307 129.91 300.875 131 297C131.793 294.18 135.5 291 135.5 291C135.5 291 139.753 279.002 140 271C140.314 260.817 135.305 255.655 134.5 245.5C134.022 239.466 134.5 230 134.5 230C134.5 230 155.365 218.948 170 217C178.903 215.815 184.173 215.339 193 217C205.103 219.278 221.5 230.5 221.5 230.5C221.5 230.5 219.336 240.798 219 247.5C218.489 257.688 218.57 263.729 221.5 273.5C223.933 281.614 231 293 231 293C231 293 235.205 295.708 236 298.5C236.818 301.373 234.5 306 234.5 306C234.5 306 206.585 313.503 188.5 314Z" fill="#91A23A" />
<path d="M136 313.5C136 313.5 164.829 321.905 186.5 321.5C206.258 321.131 227.5 316 227.5 316" stroke="#7A4921" stroke-width="16" stroke-linecap="square" />
<path d="M137 239.5C137 239.5 131.084 265.464 129 288.5C127.346 306.78 129 335.5 129 335.5" stroke="#D0B597" stroke-width="16" stroke-linecap="round" stroke-linejoin="round&quo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0