css实现一个点心零食包装袋效果代码-html代码-BFW代码库

css实现一个点心零食包装袋效果代码

代码语言：html

代码描述：css实现一个点心零食包装袋效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        @import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');
        
        body {
          background: #a005;
        }
        
        .snack {
          --base: #c00;
          --dark: #a00;
          font-family: 'Zen Kurenaido', Helvetica, sans-serif;
          font-style: italic;
          color: #fff;
          text-shadow: -0.15vmin 0.15vmin #000;
          font-weight: 900;
          font-size: 3.25vmin;
          box-sizing: border-box;
          text-align: center;
          padding-top: 24vmin;
          width: 40vmin;
          aspect-ratio: 0.75;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -webkit-mask:
            radial-gradient(6% 45% at 0 50%, #0000 98.5%, #000 99.99%) 0 50% / 55% 100% no-repeat,
            radial-gradient(5% 45% at 100% 50%, #0000 98.5%, #000 99.99%) 100% 55% / 50% 100% no-repeat
            ;
          background: 
            /* bag shadows */
            radial-gradient(at 0 0, #fcc2, #fcc0, #0000, #0002) 50% 50% / 100% 90%,
            linear-gradient(#fcc2, #fcc0, #0000, #0002) 50% 50% / 100% 90%,
            /* logo */
            radial-gradient(350% 110% at 100% 100%, #0000 33%, #f00 0 90%, #0000 0) 40% 53.15% / 17% 15%,
            radial-gradient(350% 110% at 0 0, #0000 33%, #f00 0 90%, #0000 0) 60% 46.85% / 17% 15%,
            radial-gradient(circle, gold 10%, orange 17%, #0000 17.2% 17.6%, #fff0 17.8%),
            linear-gradient(maroon 90%, white 0) 37% 56.5% / 10% 3%,
            linear-gradient(white 10%, maroon 0) 63% 43.5% / 10% 3%,
            radial-gradient(350% 110% at 100% 100%, #0000 33%, #fff 0 90%, #0000 0) 40% 53.4% / 18% 16%,
            radial-gradient(350% 110% at 0 0, #0000 33%, #fff 0 90%, #0000 0) 60% 46.65% / 18% 16%,
            radia.........完整代码请登录后点击上方下载按钮下载查看