css布局实现碗筷效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现碗筷效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-image: radial-gradient( circle, #4c4c4c, #484848, #434343, #3f3f3f, #3b3b3b, #373737, #333333, #2f2f2f, #2b2b2b, #272727, #232323, #1f1f1f ); display: flex; align-items: center; justify-content: center; height: 98vh; overflow: hidden; } .plate { position: relative; background: #4b4748; width: 200px; height: 300px; border-radius: 6px; box-shadow: -4px 10px 32px 5px rgba(23, 21, 22, 0.75); } .chopstick-left { position: absolute; left: 90%; top: 7%; border-top-right-radius: 90px; width: 4px; height: 250px; background: #863416; } .chopstick-right { position: absolute; right: 14.5%; top: 7%; border-top-left-radius: 90px; width: 4px; height: 250px; background: #863416; } .wasabi { width: 50px; height: 50px; top: 76%; position: absolute; left: 7%; z-index: 8; } .shadow1 { width: 55px; height: 55px; top: 76%; position: absolute; left: 5%; } .shadow2 { position: absolute; left: 89%; top: 7%; border-top-right-radius: 90px; width: 2.5px; height: 250px; background: #353232; } .shadow3 { position: absolute; right: 16.5%; top: 7%; border-top-left-radius: 90px; width: 2px; height: 250px; background: #353232; } .sushi1 { width: 34px; height: 62px; background: repeating-linear-gradient( -17deg, #f0d77a, #f0d77a 8px, #7c783e 8px, #7c783e 16px ); position: absolute; border-radius: 32% 68% 31% 69% / 30% 63% 37% 70%; left: 40%; top: 12%; transform: rotate(-30deg); box-shadow: -4px 10px 32px -4px rgba(23, 21, 22, 0.75); } .sushi2 { position: absolute; width: 31.5px; height: 62px; left: 40%; top: 35%; border: 2px solid black; transform: rotate(-50deg); background: white; border-radius: 8px; box-shadow: -4px 10px 32px -4px rgba(23, 21, 22, 0.75); } .fish { position: absolute; width: 25px; height: 50px; transform: rotate(-40deg); left: 43%; top: 38%; background: #ee5f21; border-radius: 18% 82% 0% 100% / 15% 100% 0% 85%; } .seaweed { position: absolute; width: 35px; height: 10px; transform: rotate(-50deg); left: 41%; top: 45%; background: #000; } .sushi3 { box-shadow: -4px 10px 32px -4px rgba(23, 21, 22, 0.75); width: 34px; height: 62px; background: repeating-linear-gradient( -17deg, #ee6c62, #ee6c62 8px, #f5a7a1 8px, #be564e 16.........完整代码请登录后点击上方下载按钮下载查看
网友评论0