css透明喷漆,纯CSS实现的油漆滚筒

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

padding: 0;

}

.container {

position: absolute;

top: 0;

left: 50%;

transform: translateX(-50%);

}

.paint {

position: relative;

width: 100px;

height: 150px;

background: #FB9B9C;

}

.paint:before {

display: block;

content: '';

position: absolute;

top: 0;

left: 0;

width: 16px;

height: 100px;

background: #FB9B9C;

border-radius: 16px;

z-index: 1;

}

.paint:after {

display: block;

content: '';

position: absolute;

top: 0;

left: 32px;

width: 16px;

height: 120px;

background: #FB9B9C;

border-radius: 16px;

z-index: 1;

}

.paint .splash {

position: absolute;

bottom: 0;

width: 64px;

height: 64px;

background: #fff;

z-index: 0;

}

.paint .splash:before {

display: block;

content: '';

position: absolute;

bottom: 0;

right: 0;

width: 16px;

height: 100px;

background: #fff;

border-radius: 16px;

}

.paint .splash:after {

display: block;

content: '';

position: absolute;

bottom: 0;

left: 16px;

width: 16px;

height: 74px;

background: #fff;

border-radius: 16px;

}

.roll {

position: relative;

top: -20px;

width: 100px;

height: 40px;

background: #FB9B9C;

border: 5px solid #3E4245;

border-radius: 8px;

box-sizing: border-box;

z-index: 3;

}

.roll:before {

display: block;

content: '';

width: 100%;

height: 5px;

background: #FEB2B2;

border-top-left-radius: 4px;

border-top-right-radius: 4px;

}

.roll:after {

display: block;

content: '';

position: absolute;

bottom: 0;

width: 100%;

height: 8px;

background: #FF6E71;

border-bottom-left-radius: 4px;

border-bottom-right-radius: 4px;

}

.handle {

position: relative;

top: -40px;

right: -10px;

width: 100px;

height: 30px;

background: transparent;

border: 5px solid #3E4245;

border-radius: 8px;

box-sizing: border-box;

z-index: 2;

}

.handle:before {

display: block;

content: '';

position: absolute;

top: 20px;

right: 30px;

width: 30px;

height: 30px;

border-left: 5px solid #3E4245;

border-top-left-radius: 8px;

box-sizing: border-box;

z-index: 5;

}

.handle:after {

display: block;

content: '';

position: absolute;

top: 10px;

left: -5px;

width: 40px;

height: 20px;

background: #fff;

}

.grip {

position: relative;

top: -20px;

left: 40px;

width: 15px;

height: 50px;

background: #9CD8D0;

border: 5px solid #3E4245;

border-radius: 8px;

box-sizing: border-box;

}

.grip:before {

display: block;

content: '';

width: 50%;

height: 100%;

background: #6CB8B4;

border-radius: 100%;

}