单个div+css布局一个有毒容器瓶效果代码-html代码-BFW代码库

单个div+css布局一个有毒容器瓶效果代码

代码语言：html

代码描述：单个div+css布局一个有毒容器瓶效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }
        
        :root {
          --size: 100;
          --unit: calc((var(--size) / 100) * 1vmin);
        }
        
        body {
          background-color: lightpink;
          margin: 0;
        }
        
        div {
          height: calc(var(--unit) * 75);
          width: calc(var(--unit) * 75);
        
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        
          background:
            /* Bottle top */
            linear-gradient(black 20%, lightblue 25% 80%, black 80%) 50% 23% / 16% 3.5%,
            radial-gradient(50% 50% at 103% 50%, lightblue 48%, black 48% 85%, transparent 52%) 40% 22.8% / 3.5% 4%,
            radial-gradient(50% 50% at -3% 50%, lightblue 48%, black 48% 85%, transparent 52%) 60% 22.8% / 3.5% 4%,
        
            /* Cork */
            radial-gradient(50% 50% at 50% 100%, SaddleBrown 48%, black 48% 59%, transparent 52%) 50% 14% / 20% 5%,
            linear-gradient(78deg, transparent 27%, black 27% 35%, SaddleBrown 35%) 47% 20% / 7% 10%,
            linear-gradient(102deg, SaddleBrown 65%, black 65% 73%, transparent 73%) 53% 20% / 7% 10%,
            radial-gradient(50% 50% at 50% 0%, SaddleBrown 48%, black 48% 59%, transparent 52% ) 50% 29% / 13% 4%,
          
            /* Bottle Base Inside */
            linear-gradient(102deg, transparent 71%, black 71% 72%, transparent.........完整代码请登录后点击上方下载按钮下载查看