纯css实现滚筒洗衣机效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现滚筒洗衣机效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --background-color: #EE5B52; --machine-white: white; --machine-feature-gray: #A3A1A1; --accent-green: #5FBD9D; --darkest-gray: #636161; } 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); } /* Main machine body */ .machine { position: absolute; left: 150px; top: 100px; width: 300px; height: 400px; background: var(--machine-white); border-radius: 2%; } /* Powder drawer */ .drawer { position: absolute; top: 10px; left: 10px; width: 100px; height: 50px; border: 2px solid var(--machine-feature-gray); border-radius: 0 0 20% 0; } /* Drawer handle */ .drawer::after { content: ''; position: absolute; width: 70px; height: 15px; background: var(--machine-feature-gray); bottom: 5px; right: 5px; border-radius: 0 0 30% 0; } /* Small LED display */ .panel { position: absolute; width: 40px; height: 15px; background: var(--darkest-gray); left: 150px; top: 30px; } /* Light indicator in panel */ .panel::before { content: ''; position: absolute; width: 8px; height: 10px; background: var(--accent-green); right: 5px; top: 2px; } /* Machine dial */ .panel::after { content: ''; position: absolute; left:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0