div+css布局实现可爱南瓜头效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现可爱南瓜头效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* General Styling */ * { box-sizing: border-box; margin: 0; padding: 0; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f0f8ff; overflow: hidden; } /* Main Pumpkin Body */ .pumpkin { position: relative; width: 18vw; height: 20vw; max-width: 220px; max-height: 240px; display: flex; align-items: center; justify-content: center; } /* Pumpkin Body and Segments */ .pumpkin-body { background: #ff9d4d; width: 100%; height: 100%; border-radius: 50%; position: absolute; z-index: 1; } .segment { position: absolute; background: #ffaf5a; width: 85%; height: 100%; border-radius: 50%; z-index: 0; } .segment-left { left: -8%; } .segment-right { right: -8%; } /* Pumpkin Stem */ .stem { position: absolute; background: #6b4423; height: 15%; width: 10%; top: -6%; left: 50%; transform: translateX(-50%); border-radius: 20% 20% 0 0; z-index: 2; } /* Face Styling */ .face { position: relative; width: 60%; height: 60%; z-index: 3; } /* Larger, Cute Eyes with Highlights */ .eye { position: absolute; background: #333; height: 20%; width: 16%; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .eye-left { left: 18%.........完整代码请登录后点击上方下载按钮下载查看
网友评论0