css实现一个带阴影透明玻璃球效果代码-html代码-BFW代码库

css实现一个带阴影透明玻璃球效果代码

代码语言：html

代码描述：css实现一个带阴影透明玻璃球效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        /*!Variables*/
        
        :root {
          --base-color: #ffc3d98a;
          --base-shadow: #ff93b9;
          --darker-shadow: #f01260f3;
          --darkest-shadow: #fd4686;
          --base-highlight: #ff86b1;
          --lighter-highlight: #ffc8dc;
          --lightest: #ffffff;
        }
        
        body {
          height: 100vh;
          width: 100vw;
          overflow: hidden;
        }
        
        main {
          background-color: red;
          position: relative;
          left: 30%;
          top: 10%;
        }
        
        div.crop {
          position: absolute;
          z-index: 4;
          width: 450px;
          height: 450px;
          border-radius: 50%;
          box-shadow: -200px -200px 20px 0 var(--lightest);
        }
        
        .inner.shadow {
          position: absolute;
          left: 5px;
          top: 2px;
          z-index: 3;
          width: 360px;
          height: 360px;
          background: var(--base-shadow);
          border-radius: 50%;
          filter: blur(40px);
        }
        
        .inner.shadow.two {
          position: absolute;
          left: 100px;
          top: 100px;
          z-index: 3;
          width: 150px;
          height: 150px;
          background: var(--darkest-shadow);
          border-radius: 50%;
          filter: blur(50px);
        }
        
        .inner.highlight.one {
          position: absolute;
          z-index: 4;
          left: 70px;
          top: 140px;
          z-index: 4;
          width: 25px;
          height: 30px;
          background: var(--lightest);
          border-radius: 50%;
          transform: rotate(30deg);
          filter: blur(8px);
        }
        
        .inner.highlight.two {
          position: absolute;
          z-index: 4;
          left: 120px;
          top: 50px;
          z-index: 4;
          width: 30px;
          height: 80px;
          background: var(--lightest);
          border-radius: 50%;
          tr.........完整代码请登录后点击上方下载按钮下载查看