svg+css实现立体拼凑字母f效果代码

代码语言:html

所属分类:布局界面

代码描述:svg+css实现立体拼凑字母f效果代码

代码标签: svg css 立体 拼凑 字母

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
svg {
  width: 80vw;
  display: block;
  height: 80vh;
  /* filter: 
      drop-shadow(0 0.1em 0.25rem hsla(0, 50%, 30%, 0.5))
      drop-shadow(0 0.6em 0.75rem hsla(340, 100%, 40%, 0.3));
  */
}

body {
  margin: 0;
  padding: 0;
  display: grid;
  min-height: 100vh;
  place-content: center;
  background-color: #fafafa;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000409;
  }
}
</style>




</head>

<body>
  <svg 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 6 8" 
  style="fill:url(#ga);">
  <defs>
    <linearGradient id="gb" x1="0" x2="0" y1="1.2" y2=".2&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0