css布局实现一碗咖啡效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一碗咖啡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --bg: #b5371e; --cup: #fff; --milk: #efd4b7; --foam: #b06643; --coffee: #2b1007; --shadow: #4e1911; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg); } .art { width: 80vmin; height: 80vmin; position: relative; display: flex; align-items: center; justify-content: center; perspective: 200vmin; transform-style: preserve-3d; } .art * { position: absolute; } .cup { z-index: 1; width: 43.75vmin; height: 44.75vmin; background: radial-gradient(circle at 90% 92%, #fff0 0 2.25vmin , var(--foam) calc(2.25vmin + 1px) 11vmin, #fff0 0 100%), radial-gradient(circle at 95% 90%, #fff0 0 7vmin , var(--foam) calc(7vmin + 1px) 11vmin, #fff0 0 100%), radial-gradient(circle at 50% 50%, #fff0 15vmin, var(--foam) calc(15vmin + 1px) 16vmin, var(--milk) calc(16vmin + 1px) 18.25vmin, var(--cup) calc(18.25vmin + 1px) 100%), radial-gradient(circle at 52% 52%, #fff0 15vmin, var(--foam) calc(15vmin + 1px) 17vmin, #fff0 0 100%), radial-gradient(circle at 24% 34%, var(--foam) 7vmin, #fff0 calc(7vmin + 1px) 100%), radial-gradient(circle at 23% 35%, var(--foam) 7vmin, #fff0 calc(7vmin + 1px) 100%), radial-gradient(circle at 22% 36%, var(--foam) 7vmin, #fff0 calc(7vmin + 1px) 100%), radial-gradient(circle at 21.5% 37%, var(--foam) 7vmin, #fff0 calc(7vmin + 1px) 100%); background-color: var(--coffee); margin-top: -2.75vmin; margin-left: 1.5vmin; border-radius: 100%; background-repeat: no-repeat; background-position: 7.5vmin 23vmin, 15vmin 7vmin, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; background-size: 3vmin 3vmin, 10vmin 9vmin, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; } .cup:before { content: ""; position: absolute; width: 15vmin; height: 6.5vmin; background: linear-gradient(90deg, var(--cup) 5vmin, #fff0 0 100%), radial-gradient(circle at 50% 50%, var(--cup) 6vmin, #fff0 calc(6vmin + 1px) 100%); bottom: 6.75vmin; transform: rotate(30deg); right: -11.5vmin; } .bubbles { width: 26vmin; height: 32vmin; top: 6vmin; left: 5.5vmin; background: #fff0; } .bubbles i { --top: 6vmin; --left: 4.5vmin; --scl: 0.125; width: 5.5vmin; height: 5.5vmin; top: var(--top); left: var(--left); background: var(--coffee); border-radius: 100%; box-sizing: border-box; border-width: 0 0 1px 1px; border-color: #0008 #0008 #fff4 #fff4; border-style: solid; transform: rotate(-45deg) scale(var(--scl)); box-shadow: -1px 1px 5px #fff8; } .bubbles i:before, .bubbles i:after { content: ""; position: absolute; width: 4.5vmin; height: 4.5vmin; border-radius: 100%; transform: rotate(81deg); left: 0.4vmin; top: 0.5vmin; filter: blur(1px) drop-shadow(0px 2px 0px var(--milk)); background: radial-gradient(circle at 58% 180%, #fff0 3vmin, var(--milk) calc(3vmin + 1px)); background-repeat: no-repeat; background-position: 0 0; background-size: 4vmin 2vmin; } .bubbles i:after { width: 2vmin; height: 1vmin; border: 0.25vmin solid var(--milk); border-width: 0.25vmin 0.15vmin 0.5vmin 0.5vmin; transform: rotate(68deg); left: 1.25vmin; top: 0.8vmin; border-color: #fff0 #fff0 #fff0 var(--milk); background: #fff0; } .bubbles i:nth-child(1) { --top: 28.75vmin; --left: 10vmin; } .bubbles i:nth-child(2) { --scl: 0.15; --top: 27.5vmin; --left: 6.5vmin; } .bubbles i:nth-child(3) { --scl: 0.135; --top: 27.1vmin; --left: 5.75vmin; } .bubbles i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0