CSS
语言:
CSSSCSS
确定
body {
background-color: #FB9F89;
}
.container {
position: absolute;
top: 30px;
left: 200px;
}
.saucer {
position: absolute;
top: 50px;
left: 40px;
width: 200px;
height: 200px;
border-radius: 100%;
background-color: #FFF;
box-shadow: 5px 1px 30px #948296;
border: 5px solid #FFF;
}
.cup {
position: absolute;
top: 34px;
left: 45px;
width: 100px;
height: 100px;
border-radius: 100%;
border: 10px solid #FFF;
box-shadow: 0 10px 30px #948296;
}
.inner {
position: absolute;
top: 50px;
left: 45px;
width: 100px;
height: 80px;
border-radius: 100%;
box-shadow: -10px 10px 60px #948296;
}
.holder {
position: absolute;
top: 30px;
left: -30px;
width: 30px;
height: 30px;
background-color: #FFF;
border-radius: 30%;
}
.coffee {
width: 100px;
height: 100px;
border-radius: 100%;
}
.americano {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #685044;
box-shadow: inset 0 0 10px #000;
}
.latte {
background-color: #C3B299;
width: 100px;
height: 100px;
border-radius: 100%;
}
.cappu {
background-color: #FC9E4F;
}
.water {
background-color: #47A8BD;
opacity: 0.5;
}
.shine {
width: 30px;
height: 10px;
background-color: #FFF;
opacity: 0.3;
border-radius: 100%;
;
position: absolute;
top: 10px;
left: 53px;
transform: rotate(30deg);
}
.foam {
position: absolute;
top: 3px;
left: 3px;
background-color: #FFF;
width: 90px;
height: 90px;
border-radius: 100%;
opacity: 0.7;
filter: blur(10px);
visibility: hidden;
}
button {
width: 110px;
height: 25px;
border: none;
background-color: #FFF;
border-radius: 10px;
font-size: 12px;
outline: none;
cursor: pointer;
}
button:hover {
opacity: 0.9;
}
.choices {
margin-left: -70px;
}