css布局实现草坪上的矿泉水瓶效果代码-html代码-BFW代码库

css布局实现草坪上的矿泉水瓶效果代码

代码语言：html

代码描述：css布局实现草坪上的矿泉水瓶效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
        border: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}
:root {
        font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
        background: url(//repo.bfw.wiki/bfwrepo/image/6008e1dfb5d12.png) 0 0 / 20em 20em;
        display: flex;
        font: 1em/1.5 sans-serif;
        height: 100vh;
        padding: 1.5em 0;
}
.wb, .wb__cap, .wb__mouth, .wb__neck, .wb__top {
        margin: auto;
}
.wb {
        position: relative;
        width: 9em;
        height: 28em;
}
.wb__cap {
        background:
                linear-gradient(90deg,#001329aa,#00132900 33% 67%,#001329aa),
                radial-gradient(60% 8% at 50% 4%,#b6cafb,#b6cafb00 50%),
                linear-gradient(90deg,#5583f600 30%,#5583f6 50%,#5583f600 70%) 0 100% / 100% 0.2em,
                repeating-linear-gradient(90deg,#0000 0 0.1em,#0d4ef2 0.1em 0.2em,#0000 0.2em) 0 0.1em / 100% 0.7em,
                linear-gradient(#0b46da 0.1em,#0000 0.1em 0.2em,#0d4ef2 0.2em 0.6em,#0000 0.6em 0.7em,#0d4ef2 0.7em 0.8em,#0000 0.8em 1em,#0b46da 1em) 0 0.9em / 100% 1.25em,
                radial-gradient(40% 25% at 50% 90%,#b6cafb,#b6cafb00 50%),
                radial-gradient(40% 200% at 50% 90%,#5583f6,#5583f600 50%),
                #255ff4;
        background-repeat: no-repeat;
        border-radius: 0.25em 0.25em 0 0;
        width: 3em;
        height: 2.15em;
}
.wb__mouth {
        border-radius: 0.25em 0.25em 0.125em 0.125em;
        box-shadow:
                0 0.2em 0.1em #051433 inset,
                0 -0.25em 0.15em #aac4dd inset;
        width: 3.5em;
        height: 0.3em;
}
.wb div:nth-child(n + 3):nth-child(-n + 14) {
        --blur1: 1px;
        backdrop-filter: blur(var(--blur1));
        -webkit-backdrop-filter: blur(var(--blur1));
}
.wb__neck {
        background:
                linear-gradient(90deg,#051433 0.15em,#05143300 0.25em 2.75em,#051433 2.85em),
                linear-gradient(90deg,#fff0 12.5%,#fff6 12.5% 40%,#fff0 40% 55%,#fff6 55% 80%,#fff0 80%),
                linear-gradient(0deg,#05143322,#05143300 0.2em),
                linear-gradient(90deg,#aac4dd00,#aac4dd77) -3em 0 / 9em 100%;
        width: 3em;
        height: 0.8em;
}
.wb__top {
        background:
                radial-gradient(125% 125% at center,#fff7,#fff0 50%) 4.4em 0.25em / 0.75em 0.3em no-repeat,
                linear-gradient(132deg,#051433 1.35em,#05143300 1.4em) 0 100% / 100% 60% no-repeat,
                linear-gradient(-132deg,#051433 1.35em,#05143300 1.4em) 0 100% / 100% 60% no-repeat,
                linear-gradient(132deg,#05143377 24%,#05143300 27%),
                linear-gradient(-132deg,#05143377 24%,#051.........完整代码请登录后点击上方下载按钮下载查看