html5做咖啡网页素材,HTML5/CSS3咖啡品类切换动画
CSS
語(yǔ)言：
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;
}
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的html5做咖啡网页素材,HTML5/CSS3咖啡品类切换动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 配置文件管理服务器,06-配置文件管理
- 下一篇： safari浏览器_吹爆苹果自带浏览器S