html5做咖啡网页素材,HTML5/CSS3咖啡品类切换动画

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;

}