css家用电器,CSS3 家用电器

CSS

语言：

CSSSCSS

确定

[role="presentation"] {

margin: 0;

padding: 0;

list-style: none; }

[role="presentation"] > li {

float: left;

position: relative;

margin-top: 80px;

width: 140px;

height: 170px;

border: 4px solid #555455;

border-radius: 14px;

background-color: #d7e4e7;

background-image: linear-gradient(to right, #95c1cb 15%, #d7e4e7 15%); }

[role="presentation"] > li::before, [role="presentation"] > li::after {

position: absolute;

bottom: -8px;

width: 8px;

height: 0;

border: 4px solid transparent;

border-top-color: #555455;

border-bottom-width: 0;

content: ''; }

[role="presentation"] > li::before {

left: 14px; }

[role="presentation"] > li::after {

right: 14px; }

[role="presentation"] > li.fridge {

margin-top: 0;

height: 250px; }

[role="presentation"] > li.fridge::after {

box-shadow: 0 -251px 0 1px #555455; }

[role="presentation"] > li + li {

margin-left: 80px; }

.fridge .freezer, .fridge .body {

position: relative; }

.fridge .freezer::before, .fridge .freezer::after, .fridge .body::before, .fridge .body::after {

position: absolute;

top: 7px;

right: 4px;

width: 3px;

height: 45px;

border-radius: 5px;

background-color: #fff;

content: ''; }

.fridge .handle {

position: absolute;

top: 6px;

bottom: 6px;

left: 4px;

width: 5px;

border: 3px solid #555455;

border-radius: 5px;

background-color: #f9ac3b;

box-sizing: content-box; }

.fridge .freezer {

height: 95px;

border-bottom: 4px solid #555455; }

.fridge .freezer .handle {

top: 20px; }

.fridge .freezer::before {

display: none; }

.fridge .freezer::after {

bottom: 7px;

height: auto; }

.fridge .body {

height: 147px; }

.fridge .body .handle {

bottom: 40px; }

.fridge .body::before {

top: 62px;

height: auto;

bottom: 7px; }

.washingmachine .top {

height: 28px;

border-bottom: 4px solid #555455; }

.washingmachine .body {

position: relative;

height: 134px; }

.washingmachine .body::before, .washingmachine .body::after {

position: absolute;

top: 7px;

right: 4px;

width: 3px;

height: 15px;

border-radius: 5px;

background-color: #fff;

content: ''; }

.washingmachine .body::after {

top: 27px;

bottom: 7px;

height: auto; }

.washingmachine .window {

position: absolute;

top: 50%;

left: 50%;

width: 68px;

height: 68px;

border: 4px solid #555455;

border-radius: 100%;

background-color: #d7e4e7;

overflow: hidden;

transform: translate(-50%, -50%);

box-shadow: 0 0 0 7px #f9ac3b, 0 0 0 11px #555455; }

.washingmachine .window::before, .washingmachine .window::after {

display: block;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

border-radius: 100%;

content: ''; }

.washingmachine .window::before {

box-shadow: 0 0 0 6px #fff;

transform: translateX(-6px); }

.washingmachine .window::after {

box-shadow: 0 0 0 6px #95c1cb;

transform: translateX(6px); }

* {

box-sizing: border-box; }

html, body {

margin: 0;

padding: 0;

height: 100%; }

body {

display: flex;

align-items: center;

justify-content: center;

font-family: 'Avernir Next', Avernir, Helvetica, Arial sans-serif;

background-color: #fffbe9; }