冰饮网页html语言,HTML5一杯加了冰块的苏打水（碳酸饮料）

CSS

语言：

CSSSCSS

确定

body {

padding: 0px;

margin: 0px;

background-color: black;

text-align: center;

position: absolute;

top: 0px;

bottom: 0px;

left: 0px;

right: 0px;

}

.bubble {

position: absolute;

border-radius: 50%;

border: solid 1px rgba(255, 255, 255, .5);

height: 10px;

width: 10px;

box-shadow: inset 0 0 20px 2px rgba(255, 255, 255, 1);

bottom: 0px;

left: 10px;

z-index: 1;

opacity: .8;

display: none;

}

.glass {

width: 300px;

height: 500px;

border-top: solid 5px rgba(255, 255, 255, .5);

border-bottom: solid 5px rgba(255, 255, 255, .8);

border-left: solid 5px rgba(255, 255, 255, .8);

border-right: solid 5px rgba(255, 255, 255, .8);

position: relative;

display: inline-flex;

margin: 50px auto;

border-top-left-radius: 10px;

border-bottom-left-radius: 20px;

border-top-right-radius: 10px;

border-bottom-right-radius: 20px;

}

.glass:before {

content: "";

position: absolute;

background: linear-gradient( to left, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.6) 92%, rgba(255, 255, 255, 0.0) 100%);

bottom: 2px;

top: 20px;

left: 2%;

opacity: 0.6;

height: 90%;

width: 90%;

filter: blur(5px);

z-index: 1000;

}

.drink {

background-color: rgba(255, 255, 255, .5);

box-shadow: inset 0 0 20px 2px rgba(255, 255, 255, 1);

position: absolute;

bottom: -1px;

top: 20px;

left: -1px;

right: -1px;

border-bottom-left-radius: 20px;

border-bottom-right-radius: 20px;

z-index: 100;

}

#orange.glass {

margin-right: 100px;

}

#orange .drink {

background-color: rgba(255, 69, 0, .5);

box-shadow: inset 0 0 20px 2px rgba(255, 69, 0, 1);

}

#orange .bubble {

box-shadow: inset 0 0 20px 2px rgba(255, 69, 0, 1);

border: solid 1px rgba(255, 69, 0, .5);

}

#grape.glass {

margin-right: 100px;

width: 450px;

height: 400px;

}

#grape .drink {

background-color: rgba(255, 0, 255, .5);

box-shadow: inset 0 0 20px 2px rgba(255, 0, 255, 1);

}

#grape .bubble {

box-shadow: inset 0 0 20px 2px rgba(255, 0, 255, 1);

border: solid 1px rgba(255, 0, 255, .5);

}

#MtDew.glass {

width: 200px;

height: 650px;

}

#MtDew .drink {

background-color: rgba(0, 255, 0, .5);

box-shadow: inset 0 0 20px 2px rgba(0, 255, 0, 1);

filter: brightness(3) saturate(8);

}

#MtDew .bubble {

box-shadow: inset 0 0 20px 2px rgba(0, 255, 0, 1);

border: solid 1px rgba(0, 255, 0, .5);

}

.ice {

position: absolute;

width: 100px;

height: 100px;

box-shadow: inset 0 0 30px white;

border-radius: 20px;

z-index: 1;

overflow: hidden;

opacity: .8;

animation: bob 2s linear infinite;

/*transform:rotateZ(10deg);*/

left: 20px;

}

.ice:before {

content: "*";

position: absolute;

background: linear-gradient( to left, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.6) 92%, rgba(255, 255, 255, 0.2) 100%);

bottom: 2px;

top: 10px;

left: 12%;

opacity: 0.6;

height: 90%;

width: 90%;

filter: blur(5px);

z-index: 1000;

text-shadow: 66px 72px white, 66px 53px white, 32px 68px white, 39px 75px white, 70px 32px white, 15px 67px white, 2px 43px white, 1px 13px white, 1px 61px white, 75px 75px white, 73px 67px white, 92px 67px white, 2px 1px white;

}

@keyframes bob {

0% {

margin-top: .5%;

}

35% {

margin-top: -1%;

}

75% {

margin-top: 1%;

}

90% {

margin-top: -.5%;

}

100% {

margin-top: .5%;

}

}