单个div+css实现一个饼干效果代码-html代码-BFW代码库

单个div+css实现一个饼干效果代码

代码语言：html

代码描述：仅仅使用一个div+css代码实现一个饼干效果

代码标签： css 饼干

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          min-height: 325tive;
          background-color: #639;
        }
        div {
          position: absolute;
          left: 50%;
          top: 50%;
        }
        div:before,
        div:after {
          display: block;
          content: '';
          position: absolute;
        }
        @media (max-width: 400px) {
          div {
            transform: scale(0.8);
          }
        }
        #nostalgia {
          box-sizing: border-box;
          font-size: 10px;
          width: 35em;
          height: 12em;
          margin-left: -17.5em;
          margin-top: -6em;
          background-repeat: no-repeat;
          background-image: linear-gradient(80deg, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0) 40%), linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0.2), rgba(255,255,255,0)), linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0.2), rgba(255,255,255,0)), linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0.2), rgba(255,255,255,0)), linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0.2), rgba(255,255,255,0)), linear-gradient(to bottom, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.15) 50%), linear-gradient(to right, rgba(102,51,153,0), #4c2673, #4c2673, rgba(102,51,153,0)), linear-gradient(to right, rgba(102,51,153,0), #47246b, #47246b, rgba(102,51,153,0));
          background-size: 5% 20%, 0.2em 40%, 0.2em 40%, 20% 0.2em, 20% 0.2em, 100% 100%, 30% 50%, 40% 50%;
          background-position: 1% 97%, 0 40%, 100% 0, 10% 0, 95% 100%, 0 0, 90% 0, 60% 100%;
          box-shadow: 0 2em 0 -1em rgba(0,0,0,0.2);
        }
        #nostalgia:before,
        #nostalgia:after {
          height: 10em;
          top: 1em;
          background-repeat: no-repeat;
          border-radius: 2em;
        }
        #nostalgia:before {
          width: 9em;
          left: 1em;
          background-color: #ffd700;
          background-image: radial-gradient(circle, #ffd700 50%, rgba(255,215,0,0) 60%), radial-gradient(circle, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 60%);
          background-size: 8em 8em, 5em 5em;
          background-position: 70% 70%, 85% 85%;
          box-shadow: inset 0 0.3em 0.2em 0 rgba(255,255,255,0.6), inset -0.4em -0.4em 0 rgba(0,0,0,0.4), inset 0 0 0 0.5em #639, inset 1.2em 1.2em 0.4em rgba(0,0,0,0.15);
        }
        #nostalgia:after {
          width: 22.5em;
          right: 1.5em;
          background-color: #639;
          background-image: linear-gradient(90deg, #dc143c, #ed365b, #dc143c), linear-gradient(#ad102f, #ad102f), radial-gradient(circle, #8b4513 20%, rgba(139,69,19,0) 40%), radial-gradient(circle, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%), radial-gradient(circle, rgba(205,133,63,0.2) 40%, rgba(205,133,63,0) 100%), radial-gradient(circle, #8b4513 20%, rgba(139,69,19,0) 40%), radial-gradient(circle, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%), radial-gradient(circle, rgba(205,133,63,0.2) 40%, rgba(205,133,63,0) 100%), radial-gradient(circle, #8b4513 20%, rgba(139,69,19,0) 40%), radial-gradient(circle,.........完整代码请登录后点击上方下载按钮下载查看