css布局实现橙子效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现橙子效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
<style>
:root {
  --size: 40vmin;
  --s: calc(var(--size) / 2);
  --c-orange: hsl(33, 96%, 48%);
  --c-orange-outline: hsl(33, 96%, 80%);
  --c-orange-inner: hsl(33, 96%, 60%);
  --c-foam: hsl(33, 96%, 85%);
  --bg: hsl(227, 47%, 20%);
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  background-color: var(--bg);
}

body::before,
body::after {
  content: "";
  position: relative;
  grid-area: 1 / -1;
  box-sizing: border-box;
}

body::before {
  --pull: calc(50% - 0.5vmin);
  --push: calc(50% + 0.5vmin);
  --line: transparent calc(var(--pull) - 1px),
    var(--c-orange-outline) var(--pull) var(--push),
    transparent calc(var(--push) + 1px) 100%;
  --cascade: to bottom, transparent, var(--c-orange) 30%, var(--c-orange);
  --orange-bottom:
      radial-gradient(
        var(--s) circle,
        var(--c-orange-outline) calc(8% - 1px),
        var(--c-orange) 8%,
        var(--c-orange-inner) 40% 70%,
        var(--c-orange) 90%,
        var(--c-orange-outline) calc(90% + 1px) 92%,
        var(--c-orange) 95% 100%
      ) center;
  --orange-top:
      linear-gradient(20deg, var(--line)) 0 0 / 100% 100%, linear-gradient(65deg, var(--line)) 0 0 / 100% 100%,
      linear-gradient(110deg, var(--line)) 0 0 / 100% 100%, linear-gradient(155deg, var(--line)) 0 0 / 100% 100%,
      radial-gradient(
        var(--s) circle,
        transparent 90%,
        var(--c-orange-outline) calc(90% + 1px) 94%,
        var(--c-orange) 99% 100%
      ) center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1vmin solid var(--c-orange);
  background: var(--orange-top), -webkit-gradient(linear, left top, left bottom, from(var(--cascade))) 0% 150%/100% 50% no-repeat, var(--orange-bottom);
  background: var(--orange-top), linear-gradient(var(--cascade)) 0% 150%/100% 50% no-repeat, var(--orange-bottom);
  -webkit-animation: cascade 1200ms ease-out infinite;
          animation: cascade 1200ms ease-out infinite;
}

@-webkit-keyframes cascade {
  50% {
    background: var(--orange-top), -webkit-gradient(linear, left top, left bottom, from(var(--cascade))) 0% 160%/100% 50% no-repeat, var(--orange-bottom);
    background: var(--orange-top), linear-gradient(var(--cascade)) 0% 160%/100% 50% no-repeat, var(--orange-bottom);
  }
}

@keyframes cascade {
  50% {
    background: var(--orange-top), -webkit-gradient(linear, left top, left bottom, from(var(--cascade))) 0% 160%/100% 50% no-repeat, var(--orange-bottom);
    background: var(--orange-top), linear-gradient(var(--cascade)) 0% 160%/100% 50% no-repeat, var(--orange-bottom);
  }
}
body::after {
  --foam: var(--c-foam) 0 calc(70% - 1px), transparent 70% 100%;
  --falls: to bottom, var(--c-orange), var(--c-orange) 40%, var(--c-orange-outline);
  --falls-cover: to bottom, var(--c-orange), var(--c-orange) 25%, transparent;
  --lines: to right, transparent, transparent 4px, hsla(0, 0%, 100%, 0.1) 4px, hsla(0, 0%, 100%, 0.1) 5px;
  --mask: radial-gradient(var(--s) circle at 50% 2vmin, transparent, transparent 75%, black 90%, black);
  width: var(--size);
  mask-image: var(--mask);
  -webkit-mask-image: var(--mask);
  margin-top: auto;
  height: 50%;
  background: radial-gradient(var(--foam)) 5% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 10% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 18% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 22% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 30% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 41% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 50% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 55% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 62% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 74% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 80% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 88% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 90% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 0% calc(100% + 2vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 5% calc(100% + 2vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 15% calc(100% + 2vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 25% calc(100% + 2vmin)/calc(var(--s) / 6) calc(var(--s) / 6) no-repeat, radial-gradient(var(--foam)) 30% calc(100% + 2vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 35% calc(100% + 2vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 40% calc(100% + 2vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 45% calc(100% + 2vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 50% calc(100% + 2vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 60% calc(100% + 2vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 70% calc(100% + 2vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 75% calc(100% + 2vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 80% calc(100% + 2vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 85% calc(100% + 2vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 95% calc(100% + 2vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--falls-cover))) calc(var(--s) / 2) calc(var(--s) / 1.5)/var(--s) calc(var(--s) * 2) no-repeat, repeating-linear-gradient(var(--lines)) calc(var(--s) / 2) 0%/var(--s) 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--falls))) calc(var(--s) / 2) 0%/var(--s) 100% no-repeat;
  background: radial-gradient(var(--foam)) 5% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 10% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 18% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 22% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 30% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 41% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 50% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 55% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 62% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 74% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 80% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 88% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 90% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 0% calc(100% + 2vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 5% calc(100% + 2vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 15% calc(100% + 2vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 25% calc(100% + 2vmin)/calc(var(--s) / 6) calc(var(--s) / 6) no-repeat, radial-gradient(var(--foam)) 30% calc(100% + 2vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 35% calc(100% + 2vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 40% calc(100% + 2vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 45% calc(100% + 2vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 50% calc(100% + 2vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 60% calc(100% + 2vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 70% calc(100% + 2vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 75% calc(100% + 2vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 80% calc(100% + 2vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 85% calc(100% + 2vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 95% calc(100% + 2vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, linear-gradient(var(--falls-cover)) calc(var(--s) / 2) calc(var(--s) / 1.5)/var(--s) calc(var(--s) * 2) no-repeat, repeating-linear-gradient(var(--lines)) calc(var(--s) / 2) 0%/var(--s) 100% no-repeat, l.........完整代码请登录后点击上方下载按钮下载查看