纯css布局实现一个茶杯效果
代码语言:html
所属分类:布局界面
代码描述:纯css布局实现一个茶杯效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <style> :root { --mug-color: #9378B1; --chamomile-color: #F4C17F; --background-color: #E8E3FF; --vapour-color: rgba(244, 193, 127, 0.5); --dark-detail-color: #60557C; } body{ background: var(--background-color); } .box-canvas{ position: relative; margin: auto; display: block; margin-top: 8%; margin-bottom: 8%; width: 600px; height:600px; background: var(--background-color); } .mug-body { position: absolute; left: 190px; top: 200px; width: 220px; height: 260px; background: var(--mug-color); border-radius: 0 0 40% 40%; } /* Tea at the top of the mug */ .mug-body::before { content: ''; position: absolute; top: -45px; left: 0; width: 180px; height: 50px; border-radius: 50%; border: 20px solid var(--mug-color); background: var(--chamomile-color); } /* Tea bag string */ .mug-body::after { content: ''; position: absolute; height: 100px; width: 20px; left: 150px; top: 10px; border: 1px solid var(--mug-color); border-right: 2px solid #60557C; border-top: 3px solid #60557C; border-radius: 50% 50% 0 0; } /* Handle */ .handle { position: absolute; right: 110px; top: 220px; height: 120px; width: 80px; border: 30px solid var(--mug-color); border-radius: 0 50% 50% 0; } /* Square tag */ .handle::before { content: ''; position: absolute; z-index: 1; left: -35px; top: 37px; width: 40px; height: 40px; background: var(--background-color); transform: rotate(-5deg); border: 2px solid var(--dark-detail-color); } /* Shadow under mug */ .handle::after { content: ''; position: absolute; top: 130px; left: -200px; background: rgba(147, 120, 177, 0.2 ); width: 250px; height: 100px; border-radius: 50%; } /* Shared tea bag petal styles */ .petal { position: absolute; background: white; z-index: 1; border: 2px solid var(--dark-detail-color); width: 10px; height: 10px; border-radius: 50%; } /* Top left petal */ .flower-petal-top { left: 350px; top: 300px; } /* Bottom left petal */ .flower-petal-top::before { content: ''; background: white; position: absolute; top: 8px; left: 3px.........完整代码请登录后点击上方下载按钮下载查看
网友评论0