css布局实现橙子效果代码
代码语言: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, linear-gradient(var(--falls)) calc(var(--s) / 2) 0%/var(--s) 100% no-repeat; -webkit-animation: pour 1200ms linear infinite; animation: pour 1200ms linear infinite; } @-webkit-keyframes pour { 25% { background: radial-gradient(var(--foam)) 5% calc(100% - 5vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 10% calc(100% - 8vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 18% calc(100% - 8vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 22% calc(100% - 4vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 30% calc(100% - 6vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 41% calc(100% - 7vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 50% calc(100% - 3vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 55% calc(100% - 8vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 62% calc(100% - 12vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 74% calc(100% - 8vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 80% calc(100% - 5vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 88% calc(100% - 6vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 90% calc(100% - 4vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 0% calc(100% + 3vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 5% calc(100% + 3vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 15% calc(100% + 3vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 25% calc(100% + 1vmin)/calc(var(--s) / 6) calc(var(--s) / 6) no-repeat, radial-gradient(var(--foam)) 30% calc(100% + 1vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 35% calc(100% + 3vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 40% calc(100% + 4vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 45% calc(100% + 3vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 50% calc(100% + 1vmin)/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% + 3vmin)/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% + 1vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 85% calc(100% + 3vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 95% calc(100% + 4vmin)/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) 120% no-repeat; background: radial-gradient(var(--foam)) 5% calc(100% - 5vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 10% calc(100% - 8vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 18% calc(100% - 8vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 22% calc(100% - 4vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 30% calc(100% - 6vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 41% calc(100% - 7vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 50% calc(100% - 3vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 55% calc(100% - 8vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 62% calc(100% - 12vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 74% calc(100% - 8vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 80% calc(100% - 5vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 88% calc(100% - 6vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 90% calc(100% - 4vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 0% calc(100% + 3vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 5% calc(100% + 3vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 15% calc(100% + 3vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 25% calc(100% + 1vmin)/calc(var(--s) / 6) calc(var(--s) / 6) no-repeat, radial-gradient(var(--foam)) 30% calc(100% + 1vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 35% calc(100% + 3vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 40% calc(100% + 4vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 45% calc(100% + 3vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 50% calc(100% + 1vmin)/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% + 3vmin)/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% + 1vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 85% calc(100% + 3vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 95% calc(100% + 4vmin)/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, linear-gradient(var(--falls)) calc(var(--s) / 2) 0%/var(--s) 120% no-repeat; } 50% { background: radial-gradient(var(--foam)) 5% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 10% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 18% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 22% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 30% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 41% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 50% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 55% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 62% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 74% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 80% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 88% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 90% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 0% calc(100% + 4vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 5% calc(100% + 4vmin)/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% + 3vmin)/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% + 3vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 60% calc(100% + 3vmin)/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% + 1vmin)/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% + 3vmin)/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%/0 0 no-repeat, radial-gradient(var(--foam)) 10% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 18% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 22% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 30% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 41% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 50% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 55% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 62% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 74% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 80% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 88% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 90% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 0% calc(100% + 4vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 5% calc(100% + 4vmin)/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% + 3vmin)/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% + 3vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 60% calc(100% + 3vmin)/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% + 1vmin)/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% + 3vmin)/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, linear-gradient(var(--falls)) calc(var(--s) / 2) 0%/var(--s) 100% no-repeat; } 75% { background: radial-gradient(var(--foam)) 5% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 10% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 18% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 22% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 30% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 41% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 50% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 55% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 62% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 74% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 80% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 88% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 90% 100%/4px 4px no-repeat, radial-gradient(var(--foam)) 0% calc(100% + 3vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 5% calc(100% + 3vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 15% calc(100% + 3vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 25% calc(100% + 1vmin)/calc(var(--s) / 6) calc(var(--s) / 6) no-repeat, radial-gradient(var(--foam)) 30% calc(100% + 3vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 35% calc(100% + 3vmin)/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% + 3vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 50% calc(100% + 4vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 60% calc(100% + 4vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 70% calc(100% + 3vmin)/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% + 3vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 85% calc(100% + 3vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 95% calc(100% + 3vmin)/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) 110% no-repeat; background: radial-gradient(var(--foam)) 5% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 10% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 18% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 22% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 30% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 41% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 50% 100%/0 0 no-repeat, radial-gradient(var(--foam)) 55% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 62% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 74% 100%/6px 6px no-repeat, radial-gradient(var(--foam)) 80% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 88% 100%/8px 8px no-repeat, radial-gradient(var(--foam)) 90% 100%/4px 4px no-repeat, radial-gradient(var(--foam)) 0% calc(100% + 3vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 5% calc(100% + 3vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 15% calc(100% + 3vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 25% calc(100% + 1vmin)/calc(var(--s) / 6) calc(var(--s) / 6) no-repeat, radial-gradient(var(--foam)) 30% calc(100% + 3vmin)/calc(var(--s) / 5) calc(var(--s) / 5) no-repeat, radial-gradient(var(--foam)) 35% calc(100% + 3vmin)/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% + 3vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 50% calc(100% + 4vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 60% calc(100% + 4vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 70% calc(100% + 3vmin)/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% + 3vmin)/calc(var(--s) / 4) calc(var(--s) / 4) no-repeat, radial-gradient(var(--foam)) 85% calc(100% + 3vmin)/calc(var(--s) / 3) calc(var(--s) / 3) no-repeat, radial-gradient(var(--foam)) 95% calc(100% + 3vmin)/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, linear-gradient(var(--falls)) calc(var(--s) / 2) 0%/var(--s) 110% no-repeat; } 100% { background: radial-gradient(var(--foam)) 5% calc(100% - 3vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 10% calc(100% - 4vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 18% calc(100% - 3vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 22% calc(100% - 5vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 30% calc(100% - 4vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 41% calc(100% - 3vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 50% calc(100% - 2vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 55% calc(100% - 4vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 62% calc(100% - 4vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 74% calc(100% - 3vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 80% calc(100% - 4vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 88% calc(100% - 4vmin)/0 0 no-repeat, radial-gradient(var(--foam)) 90% calc(100% - 2vmin)/0 0 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).........完整代码请登录后点击上方下载按钮下载查看
网友评论0