Friday, November 9, 2012

css教程自学-纯CSS3制作会动的瓶子

一.缘由

看这CSS3实现四叶草、水母与玻璃瓶 这个网页后,发现作者太厉害了,我的水平需要提高

从它的网站下来的网页数据是这样的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ background:#ddd;}
.main{ margin:50px auto; width:400px;}
.clover{ position:relative;}

.leave{ display:block; height:16px; width:10px; background:#2cb62c; position:absolute; left:17px; top:1px; -moz-transform:rotate(-45deg); -moz-border-radius:5px 5px 0px 3px; -moz-transform-origin:-2% 102%;}
.leave:after{content:''; display:block; height:16px; width:10px; background:#2cb62c; -moz-transform:rotate(90deg) translate(-5px,5px); -moz-transform-origin:50% 100%;-moz-border-radius:5px 5px 3px 0px;}

.leaves{ height:34px; width:34px; position:relative; z-index:1;}

.angleN{ -moz-transform:rotate(-45deg);}
.angleS{ -moz-transform:rotate(135deg);}
.angleW{ -moz-transform:rotate(-135deg);}
.angleE{ -moz-transform:rotate(45deg);}

.branch{ height:40px; width:40px; position:absolute; left:15px; top:-4px;}
.branch:after{ content:''; display:block; height:50px; width:40px; border-bottom:2px solid #219b21; -moz-border-radius:50px 50px 25px 150px; position:absolute; left:0px; top:-8px;}

.bottle{ width:100px; position: relative;}
.bottle:after{ content:''; display:block; height:14px; width:100px; -moz-border-radius:46px/10px; -moz-box-shadow:0px 1px 4px -2px rgba(0,0,0,0.2),0px 2px 10px -3px rgba(0,0,0,0.1);  position:absolute; bottom:-7.6px; z-index:0;}
.bottle:before{ content:''; display:block; height:14px; width:100px; -moz-border-radius:46px/10px; -moz-box-shadow:0px 2px 10px -2px rgba(0,204,255,0.3),0px 2px 15px -2px rgba(0,204,255,0.4);  position:absolute; bottom:-7.6px; z-index:0; display:none;}

.bottle_top{ height:30px; width:80px; position:relative; border:1px solid rgba(255,255,255,0.5); border-top:none; border-bottom:none; margin:0px auto;}
.bottle_top:after,.bottle_top:before{ content:''; display:block; height:10px; width:78px; -moz-border-radius:46px/10px; border:2px solid rgba(255,255,255,0.5); border-bottom:2px solid rgba(255,255,255,0.6); border-top:1px solid rgba(255,255,255,0.4); position:absolute; left:-1px; -moz-box-shadow:0px 0px 6px rgba(255,255,255,0.6) inset;}
.bottle_top:after{top:-6px; -moz-box-shadow:0px 0px 6px rgba(255,255,255,0.6) inset,0px 3px 3px -1px rgba(255,255,255,0.3);}
.bottle_top:before{top:24px;-moz-box-shadow:0px 0px 6px rgba(255,255,255,0.4) inset;}

.bottle_neck{height:20px; width:62px;position:relative; background:none; border:1px solid rgba(255,255,255,0.5); border-top:none; border-bottom:none; margin:0px auto;}
.bottle_neck:after,.bottle_neck:before{content:''; display:block; height:8px; width:62px; -moz-border-radius:30px/8px; border:1px solid rgba(255,255,255,0.5); border-top:none; position:absolute; left:-1px;}
.bottle_neck:after{ top:-4px;border:1px solid rgba(255,255,255,0.2); -moz-box-shadow:0px 5px 3px -2px rgba(0,0,0,0.05);}
.bottle_neck:before{ top:15px;}

.bottle_main{height:150px; position:relative; width:98px; background:none; border:1px solid rgba(255,255,255,0.5); border-top:none; border-bottom:none;}
.bottle_main:after,.bottle_main:before{content:''; display:block; height:12px; width:96px; -moz-border-radius:46px/10px; border:2px solid rgba(255,255,255,0.5); border-bottom:2px solid rgba(255,255,255,0.7); border-top:1px solid rgba(255,255,255,0.3); position:absolute; left:-1px; }
.bottle_main:after{top:-7px; -moz-box-shadow:0px 0px 6px rgba(255,255,255,0.6) inset,0px 3px 3px -1px rgba(255,255,255,0.4),0px 0px 3px rgba(0,0,0,0.05) inset,0px 0px 6px rgba(255,255,255,0.7) inset,0px 0px 3px rgba(0,0,0,0.15) inset;}
.bottle_main:before{ top:143px; -moz-box-shadow:0px 0px 6px rgba(255,255,255,0.7) inset,0px 0px 3px rgba(0,0,0,0.15) inset;}

.bottle_mouth{height:52px; width:44px; margin:0px auto; position:relative; background:none; border:1px solid rgba(0,0,0,0.04); border-top:none; border-bottom:none; background:-moz-linear-gradient(left,rgba(255,255,255,0.3),rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(255,255,255,0.3)); -moz-box-shadow:0px 0px 6px rgba(255,255,255,0.3);}
.bottle_mouth:after{content:''; display:block; height:6px; width:44px; -moz-border-radius:25px/6px; border:1px solid rgba(255,255,255,0.4);position:absolute; left:-1px;top:-4px; z-index:1; -moz-box-shadow:0px 0px 3px rgba(255,255,255,0.3);}

.bottle_inner{height:149px; width:92%; margin:0px auto; -moz-border-radius:10px 10px 20px 20px/10px; border:1px solid rgba(0,0,0,0.01); border-top:1px solid rgba(255,255,255,0.3);  border-bottom-width:0.5px; position:relative; -moz-box-shadow:0px 0px 2px rgba(255,255,255,0.5) inset,0px 0px 8px rgba(255,255,255,0.6) inset,0px 0px 5px rgba(255,255,255,0.5); position:relative; top:1px;}
.bottle_inner:before{content:''; display:block; -moz-border-radius:40px/4px; position:absolute; top:140px; width:90%; left:3px; height:9px;}

.bottle_top .highlight{ display:block; height:30px; width:20px; position:absolute; left:5px; top:5px; -moz-transform:skew(0deg,5deg);
 background:-moz-linear-gradient(left,rgba(255,255,255,0.1),rgba(255,255,255,0.6) 4%,rgba(255,255,255,0.2) 98%,rgba(255,255,255,0));}
.bottle_top .highlight:after{ content:''; display:block; height:30px; width:2px; position:absolute; left:-3px; top:-1px; -moz-transform:skew(0deg,5deg); background:rgba(255,255,255,0.3);}

.bottle_main .highlight{ display:block; height:150px; width:25px; position:absolute; left:10px; top:6px; -moz-transform:skew(0deg,6deg); 
 background:-moz-linear-gradient(left,rgba(255,255,255,0.2),rgba(255,255,255,0.5) 4%,rgba(255,255,255,0.2) 98%,rgba(255,255,255,0)); z-index:2;}
.bottle_main .highlight:after{ content:''; display:block; height:150px; width:4px; position:absolute; left:-6px; top:0px; -moz-transform:skew(0deg,3deg); background:-moz-linear-gradient(top,rgba(255,255,255,0.3),rgba(255,255,255,0) 80%);}

.bottle_neck .highlight{ display:block; height:20px; width:25px; position:absolute; left:2px; top:6px; -moz-transform:skew(0deg,6deg); 
 background:-moz-linear-gradient(left,rgba(255,255,255,0.1),rgba(255,255,255,0.3) 4%,rgba(255,255,255,0.1) 98%,rgba(255,255,255,0));}

.water{ background:-moz-linear-gradient(-85deg,rgba(0,204,255,0.35),rgba(0,173,216,0.55) 70%,rgba(0,173,216,0.4)); height:80px; width:98%; position:absolute; left:1px; bottom:1px; -moz-border-radius:50px 50px 20px 20px/8px 8px 10px 10px; -moz-box-shadow:0px 0px 6px rgba(0,204,255,0.5) inset,0px 0.2px 3px -1px rgba(0,0,0,0.3) inset,0px 2px 6px -1px rgba(0,0,0,0.1) inset,0px 2px 5px rgba(0,204,255,0.3),0px 1px 3px rgba(0,204,255,0.2);}
.water:after{ content:''; display:block; height:10px; width:88px; position:absolute; left:-1px; top:0px; background:-moz-linear-gradient(left,rgba(255,255,255,0.4),rgba(0,204,255,0.05) 50%,rgba(0,204,255,0.1) 80%,rgba(255,255,255,0.3)); -moz-border-radius:50px/8px; border:1px solid rgba(255,255,255,0.2); border-bottom-color:rgba(255,255,255,0.4); -moz-box-shadow:0px 1px 2px -1px rgba(0,204,255,0.35);}
.water:before{ content:''; display:block; height:10px; width:82px; position:absolute; left:2px; bottom:-1px; background:-moz-linear-gradient(left,rgba(0,173,216,0.2),rgba(0,204,255,0.1) 50%,rgba(0,204,255,0.2) 80%,rgba(0,173,216,0.3)); -moz-border-radius:50px/10px; border:1px solid rgba(255,255,255,0.1); border-bottom:none; -moz-box-shadow:0px -2px 3px -1px rgba(0,204,255,0.25);}

.bubble{ display:block; border:0.5px solid rgba(255,255,255,0.7); position:absolute; z-index:1; -moz-border-radius:6px/3px; -moz-transform:skew(0deg,2deg); -moz-box-shadow:0px 0px 2px rgba(255,255,255,0.6) inset,-1px 1px 2px -1px rgba(0,204,255,0.1);}

.bubble1{ height:3px; width:6px; left:6px; top:7.2px;}
.bubble2{ height:2px; width:4px; left: 14px; top: 8.4px;}
.bubble3{ height: 0.5px; left: 14px; width: 0.5px; bottom:2px; border:0.5px solid rgba(255,255,255,0.1);-moz-box-shadow:0px 0px 0px rgba(0,0,0,0);}

.cloverTop{ position:absolute; left:19px; top:-7px; z-index:1; height:14px; overflow:hidden;}
.cloverBottom{ position:absolute; left:14px; top:7px; z-index:0; height:54px; width:100px; overflow:hidden;}
.cloverBottom .clover{ margin:-14px 0px 0px 5px;}
.cloverBottom:after{ content:''; display:block; height:2px; width:36px; border:0.5px solid rgba(255,255,255,0.3); position:absolute; left:3px; top:-1px; z-index:1; -moz-border-radius:19px/2px; border-top:none; border-right:none; border-bottom-color: rgba(255,255,255,0.2); -moz-box-shadow:0px 0px 3px -1px rgba(0,0,0,0.2) inset;}
.cloverBottom:before{ content:''; display:block; height:3.5px; width:41px; border:0.5px solid rgba(255,255,255,0.2); position:absolute; left:2px; top:-1px; -moz-border-radius:19px/3.5px; border-top:none; border-left:none; border-bottom-color: rgba(255,255,255,0.1); -moz-box-shadow:0px 0px 3px -1px rgba(0,0,0,0.15) inset,0px 0px 1px rgba(0,0,0,0.08) inset; z-index:2;}

.cloverTop,.cloverBottom{-moz-animation: cloverMove 4s linear infinite alternate;}

@-moz-keyframes cloverMove{
    0%{-moz-transform:translate(0px,0px);}
    25%{-moz-transform:translate(-3px,1px);}
    50%{-moz-transform:translate(0px,-1px);}
    75%{-moz-transform:translate(4px,1px);}
    100%{-moz-transform:translate(0px,0px);}
}

.branch{-moz-animation:branchMove 4s linear infinite alternate; -moz-transform-origin:0% 0%;}

@-moz-keyframes branchMove{
    0%{-moz-transform:rotate(0deg);}
    25%{-moz-transform:rotate(3deg);}
    50%{-moz-transform:rotate(-2deg);}
    75%{-moz-transform:rotate(4deg);}
    100%{-moz-transform:rotate(0deg);}
}

.bubble3{-moz-animation:bubbleRise 4s linear infinite;}

@-moz-keyframes bubbleRise{
    0%{-moz-transform:translate(0px,0px); opacity:0; border-color:rgba(255,255,255,0.1);}
    10%{-moz-transform:translate(0px,0px); opacity:1;}
    30%{-moz-transform:translate(-1px,-15px);}
    50%{-moz-transform:translate(1px,-30px);}
    75%{-moz-transform:translate(-1px,-50px) scale(1.2);}
    98%{opacity:1; border-color:rgba(255,255,255,0.25);}
    100%{-moz-transform:translate(0px,-67px) scale(1.4); opacity:0; border-color:rgba(255,255,255,0.1);}
}

.bubble1,.bubble2{-moz-animation: bubbleMove 4s linear infinite alternate;}

@-moz-keyframes bubbleMove{
    0%{-moz-transform:translate(0px,0px) skew(0deg,2deg);}
    25%{-moz-transform:translate(-2px,0.5px) skew(0deg,5deg);}
    50%{-moz-transform:translate(0px,-0.5px) skew(0deg,2deg);}
    75%{-moz-transform:translate(2px,0.5px) skew(0deg,0deg);}
    100%{-moz-transform:translate(0px,0px) skew(0deg,2deg);}
}

.pink .water{ background:-moz-linear-gradient(-85deg,rgba(255,0,204,0.35),rgba(210,0,170,0.55) 70%,rgba(210,0,170,0.4)); -moz-box-shadow:0px 0px 6px rgba(255,0,204,0.5) inset,0px 0.2px 3px -1px rgba(0,0,0,0.3) inset,0px 2px 6px -1px rgba(0,0,0,0.1) inset,0px 2px 5px rgba(255,0,204,0.3),0px 1px 3px rgba(255,0,204,0.2);}
.pink .water:after{ background:-moz-linear-gradient(left,rgba(255,255,255,0.4),rgba(255,0,204,0.05) 50%,rgba(255,0,204,0.1) 80%,rgba(255,255,255,0.3)); -moz-box-shadow:0px 1px 2px -1px rgba(255,0,204,0.35);}
.pink .water:before{ background:-moz-linear-gradient(left,rgba(210,0,170,0.2),rgba(255,0,204,0.1) 50%,rgba(255,0,204,0.2) 80%,rgba(210,0,170,0.3)); -moz-box-shadow:0px -2px 3px -1px rgba(255,0,204,0.25);}
.pink:before{ -moz-box-shadow:0px 2px 10px -2px rgba(255,0,204,0.3),0px 2px 15px -2px rgba(255,0,204,0.4);}
.pink .bubble{-moz-box-shadow:0px 0px 2px rgba(255,255,255,0.6) inset,-1px 1px 2px -1px rgba(255,0,204,0.1);}

.yellow .water{ background:-moz-linear-gradient(-85deg,rgba(255,240,20,0.35),rgba(233,217,0,0.55) 70%,rgba(233,217,0,0.4)); -moz-box-shadow:0px 0px 6px rgba(255,240,20,0.5) inset,0px 0.2px 3px -1px rgba(0,0,0,0.3) inset,0px 2px 6px -1px rgba(0,0,0,0.1) inset,0px 2px 5px rgba(255,240,20,0.3),0px 1px 3px rgba(255,240,20,0.2);}
.yellow .water:after{ background:-moz-linear-gradient(left,rgba(255,255,255,0.4),rgba(255,240,20,0.05) 50%,rgba(255,240,20,0.1) 80%,rgba(255,255,255,0.3)); -moz-box-shadow:0px 1px 2px -1px rgba(255,240,20,0.35);}
.yellow .water:before{ background:-moz-linear-gradient(left,rgba(233,217,0,0.2),rgba(255,240,20,0.1) 50%,rgba(255,240,20,0.2) 80%,rgba(233,217,0,0.3)); -moz-box-shadow:0px -2px 3px -1px rgba(255,240,20,0.25);}
.yellow:before{ -moz-box-shadow:0px 2px 10px -2px rgba(255,240,20,0.3),0px 2px 15px -2px rgba(255,240,20,0.4);}
.yellow .bubble{-moz-box-shadow:0px 0px 2px rgba(255,255,255,0.6) inset,-1px 1px 2px -1px rgba(255,240,20,0.1);}

.green .water{ background:-moz-linear-gradient(-85deg,rgba(90,230,0,0.35),rgba(70,190,0,0.55) 70%,rgba(70,190,0,0.4)); -moz-box-shadow:0px 0px 6px rgba(90,230,0,0.5) inset,0px 0.2px 3px -1px rgba(0,0,0,0.3) inset,0px 2px 6px -1px rgba(0,0,0,0.1) inset,0px 2px 5px rgba(90,230,0,0.3),0px 1px 3px rgba(90,230,0,0.2);}
.green .water:after{ background:-moz-linear-gradient(left,rgba(255,255,255,0.4),rgba(90,230,0,0.05) 50%,rgba(90,230,0,0.1) 80%,rgba(255,255,255,0.3)); -moz-box-shadow:0px 1px 2px -1px rgba(90,230,0,0.35);}
.green .water:before{ background:-moz-linear-gradient(left,rgba(70,190,0,0.2),rgba(90,230,0,0.1) 50%,rgba(90,230,0,0.2) 80%,rgba(70,190,0,0.3)); -moz-box-shadow:0px -2px 3px -1px rgba(90,230,0,0.25);}
.green:before{ -moz-box-shadow:0px 2px 10px -2px rgba(90,230,0,0.3),0px 2px 15px -2px rgba(90,230,0,0.4);}
.green .bubble{-moz-box-shadow:0px 0px 2px rgba(255,255,255,0.6) inset,-1px 1px 2px -1px rgba(90,230,0,0.1);}

.jellyfish{ position:absolute; left:40px; top:30px; -moz-animation:jellyfishSwimming 4s linear infinite alternate;}
.jellyfish_head{position:absolute; left:0px; top:0px; display:block; height:15px; width:20px; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.5); -moz-border-radius:20px 20px 10px 10px/20px 20px 16px 16px; -moz-box-shadow:0px 0px 4px rgba(255,255,255,0.5) inset,1px 1px 2px rgba(255,255,255,0.2) inset,3px 3px 1px rgba(255,255,255,0.2) inset,-1px -1px 1px rgba(255,255,255,0.1) inset; -moz-animation:jellyfish_headChange 4s linear infinite alternate;}
.jellyfish_head:after{content:''; display:block; height:3px; width:5px; background:rgba(255,255,255,0.4); position:absolute; left:3px; top:2px; -moz-border-radius:5px/3px; -moz-transform:rotate(-15deg); -moz-box-shadow:0px 0px 1px rgba(255,255,255,0.8) inset;}

.jellyfish_tail{position:absolute; left:2px; top:15px;display:block; height:20px; width:18px; border:0.5px solid rgba(255,255,255,0.4); border-top:none; border-bottom:none;-moz-border-radius:10px 10px 16px 6px/20px 20px 6px 6px; -moz-box-shadow:0px 0px 3px rgba(255,255,255,0.3) inset,0px 4px 3px rgba(255,255,255,0.1) inset; -moz-transform-origin:50% 0%; -moz-animation:jellyfish_tailChange 4s linear infinite alternate;}
.jellyfish_tail:after{ content:''; position:absolute; left:0.5px; top:1px;display:block; height:21px; width:15.5px; border:0.5px solid rgba(255,255,255,0.3); border-right-color:rgba(255,255,255,0.4);border-top:none; border-bottom:none;-moz-border-radius:10px/10px 20px 16px 16px; -moz-box-shadow:0px 0px 3px rgba(255,255,255,0.3) inset,0px 3px 3px rgba(255,255,255,0.2) inset;}
.jellyfish_tail:before{content:''; position:absolute; left:1.5px; top:1px;display:block; height:17px; width:17px; border-right:0.5px solid rgba(255,255,255,0.4);-moz-border-radius:15px 10px 16px 16px/30px 30px 8px 8px; -moz-box-shadow:0px 0px 3px rgba(255,255,255,0.3) inset; -moz-transform:rotate(-6deg);}
.jellyfish_tail_in{position:absolute; left:-0.5px; top:0px; display:block; height:16px; width:10px; border-left:0.5px solid rgba(255,255,255,0.4); -moz-border-radius:10px 20px 16px 10px/20px 20px 6px 20px; -moz-box-shadow:3px 0px 3px rgba(255,255,255,0.2) inset; -moz-transform:rotate(14deg);}

@-moz-keyframes jellyfishSwimming{
    0%{-moz-transform:translate(0px,0px) rotate(-4deg) scale(0.8);}
    20%{-moz-transform:translate(-1px,-3px) rotate(-6deg) scale(0.8);}
    50%{-moz-transform:translate(-2px,-1px) rotate(-3deg) scale(0.8);}
    70%{-moz-transform:translate(-1px,-3px) rotate(-6deg) scale(0.8);}
    100%{-moz-transform:translate(0px,0px) rotate(-4deg) scale(0.8);}
}

@-moz-keyframes jellyfish_headChange{
    0%{-moz-transform:scale(1);}
    5%{-moz-transform:scale(1.1,0.95);}
    20%{-moz-transform:scale(0.95,1.1);}
    50%{-moz-transform:scale(1);}
    55%{-moz-transform:scale(1.1,0.95);}
    70%{-moz-transform:scale(0.95,1.1);}
    100%{-moz-transform:scale(1);}
}

@-moz-keyframes jellyfish_tailChange{
    0%{-moz-transform:scale(0.8);}
    5%{-moz-transform:scale(0.9,0.75);}
    20%{-moz-transform:scale(0.7,1);}
    50%{-moz-transform:scale(0.8);}
    55%{-moz-transform:scale(0.9,0.75);}
    70%{-moz-transform:scale(0.7,1);}
    100%{-moz-transform:scale(0.8);}
}


/*webkit*/

.leave{-webkit-transform:rotate(-45deg); -webkit-border-radius:5px 5px 0px 3px; -webkit-transform-origin:-2% 102%;}
.leave:after{-webkit-transform:rotate(90deg) translate(-5px,5px); -webkit-transform-origin:50% 100%; -webkit-border-radius:5px 5px 3px 0px;}

.angleN{ -webkit-transform:rotate(-45deg);}
.angleS{ -webkit-transform:rotate(135deg);}
.angleW{ -webkit-transform:rotate(-135deg);}
.angleE{ -webkit-transform:rotate(45deg);}

.branch:after{-webkit-border-radius:50px 50px 25px 150px;}

.bottle:after{-webkit-border-radius:46px/10px; -webkit-box-shadow:0px 1px 4px -2px rgba(0,0,0,0.2),0px 2px 10px -3px rgba(0,0,0,0.1);}
.bottle:before{-webkit-border-radius:46px/10px; -webkit-box-shadow:0px 2px 10px -2px rgba(0,204,255,0.3),0px 2px 15px -2px rgba(0,204,255,0.4); }

.bottle_top:after,.bottle_top:before{ -webkit-border-radius:46px/10px;-webkit-box-shadow:0px 0px 6px rgba(255,255,255,0.6) inset;}
.bottle_top:after{-webkit-box-shadow:0px 0px 6px rgba(255,255,255,0.6) inset,0px 3px 3px -1px rgba(255,255,255,0.3);}
.bottle_top:before{-webkit-box-shadow:0px 0px 6px rgba(255,255,255,0.4) inset;}

.bottle_neck:after,.bottle_neck:before{-webkit-border-radius:30px/8px; }
.bottle_neck:after{ -webkit-box-shadow:0px 5px 3px -2px rgba(0,0,0,0.05);}

.bottle_main:after,.bottle_main:before{-webkit-border-radius:46px/10px;}
.bottle_main:after{-webkit-box-shadow:0px 0px 6px rgba(255,255,255,0.6) inset,0px 3px 3px -1px rgba(255,255,255,0.4),0px 0px 3px rgba(0,0,0,0.05) inset,0px 0px 6px rgba(255,255,255,0.7) inset,0px 0px 3px rgba(0,0,0,0.15) inset;}
.bottle_main:before{-webkit-box-shadow:0px 0px 6px rgba(255,255,255,0.7) inset,0px 0px 3px rgba(0,0,0,0.15) inset;}

.bottle_mouth{background:-webkit-linear-gradient(left,rgba(255,255,255,0.3),rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(255,255,255,0.3)); -webkit-box-shadow:0px 0px 6px rgba(255,255,255,0.3);}
.bottle_mouth:after{-webkit-border-radius:25px/6px; -webkit-box-shadow:0px 0px 3px rgba(255,255,255,0.3);}

.bottle_inner{-webkit-border-radius:10px 10px 20px 20px/10px;-webkit-box-shadow:0px 0px 2px rgba(255,255,255,0.5) inset,0px 0px 8px rgba(255,255,255,0.6) inset,0px 0px 5px rgba(255,255,255,0.5);}
.bottle_inner:before{-webkit-border-radius:40px/4px;}

.bottle_top .highlight{-webkit-transform:skew(0deg,5deg);
 background:-webkit-linear-gradient(left,rgba(255,255,255,0.1),rgba(255,255,255,0.6) 4%,rgba(255,255,255,0.2) 98%,rgba(255,255,255,0));}
.bottle_top .highlight:after{-webkit-transform:skew(0deg,5deg);}

.bottle_main .highlight{ -webkit-transform:skew(0deg,6deg); 
 background:-webkit-linear-gradient(left,rgba(255,255,255,0.2),rgba(255,255,255,0.5) 4%,rgba(255,255,255,0.2) 98%,rgba(255,255,255,0)); }
.bottle_main .highlight:after{ -webkit-transform:skew(0deg,3deg); background:-webkit-linear-gradient(top,rgba(255,255,255,0.3),rgba(255,255,255,0) 80%);}

.bottle_neck .highlight{-webkit-transform:skew(0deg,6deg); 
 background:-webkit-linear-gradient(left,rgba(255,255,255,0.1),rgba(255,255,255,0.3) 4%,rgba(255,255,255,0.1) 98%,rgba(255,255,255,0));}

.water{ background:-webkit-linear-gradient(-85deg,rgba(0,204,255,0.35),rgba(0,173,216,0.55) 70%,rgba(0,173,216,0.4)); -webkit-border-radius:50px 50px 20px 20px/8px 8px 10px 10px; -webkit-box-shadow:0px 0px 6px rgba(0,204,255,0.5) inset,0px 0.2px 3px -1px rgba(0,0,0,0.3) inset,0px 2px 6px -1px rgba(0,0,0,0.1) inset,0px 2px 5px rgba(0,204,255,0.3),0px 1px 3px rgba(0,204,255,0.2);}
.water:after{ background:-webkit-linear-gradient(left,rgba(255,255,255,0.4),rgba(0,204,255,0.05) 50%,rgba(0,204,255,0.1) 80%,rgba(255,255,255,0.3)); -webkit-border-radius:50px/8px; -webkit-box-shadow:0px 1px 2px -1px rgba(0,204,255,0.35);}
.water:before{background:-webkit-linear-gradient(left,rgba(0,173,216,0.2),rgba(0,204,255,0.1) 50%,rgba(0,204,255,0.2) 80%,rgba(0,173,216,0.3)); -webkit-border-radius:50px/10px; -webkit-box-shadow:0px -2px 3px -1px rgba(0,204,255,0.25);}

.bubble{[;border-width:1px;]; -webkit-border-radius:6px/3px; -webkit-transform:skew(0deg,2deg); -webkit-box-shadow:0px 0px 2px rgba(255,255,255,0.6) inset,-1px 1px 2px -1px rgba(0,204,255,0.1);}

.bubble3{-webkit-box-shadow:0px 0px 0px rgba(0,0,0,0);}


.cloverBottom:after{[;border-width:1px;]; -webkit-border-radius:19px/2px;-webkit-box-shadow:0px 0px 3px -1px rgba(0,0,0,0.2) inset;}
.cloverBottom:before{[;border-width:1px;]; -webkit-border-radius:19px/3.5px; -webkit-box-shadow:0px 0px 3px -1px rgba(0,0,0,0.15) inset,0px 0px 1px rgba(0,0,0,0.08) inset;}

.cloverTop,.cloverBottom{-webkit-animation: cloverMove 4s linear infinite alternate;}

@-webkit-keyframes cloverMove{
    0%{-webkit-transform:translate(0px,0px);}
    25%{-webkit-transform:translate(-3px,1px);}
    50%{-webkit-transform:translate(0px,-1px);}
    75%{-webkit-transform:translate(4px,1px);}
    100%{-webkit-transform:translate(0px,0px);}
}

.branch{-webkit-animation:branchMove 4s linear infinite alternate; -webkit-transform-origin:0% 0%;}

@-webkit-keyframes branchMove{
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(3deg);}
    50%{-webkit-transform:rotate(-2deg);}
    75%{-webkit-transform:rotate(4deg);}
    100%{-webkit-transform:rotate(0deg);}
}

.bubble3{-webkit-animation:bubbleRise 4s linear infinite;}

@-webkit-keyframes bubbleRise{
    0%{-webkit-transform:translate(0px,0px); opacity:0; border-color:rgba(255,255,255,0.2);}
    10%{-webkit-transform:translate(0px,0px); opacity:1;}
    30%{-webkit-transform:translate(-1px,-15px);}
    50%{-webkit-transform:translate(1px,-30px);}
    75%{-webkit-transform:translate(-1px,-50px) scale(1.2);}
    98%{opacity:1;  border-color:rgba(255,255,255,0.35);}
    100%{-webkit-transform:translate(0px,-67px) scale(1.4); opacity:0; border-color:rgba(255,255,255,0.2);}
}

.bubble1,.bubble2{-webkit-animation: bubbleMove 4s linear infinite alternate;}

@-webkit-keyframes bubbleMove{
    0%{-webkit-transform:translate(0px,0px) skew(0deg,2deg); border:1px solid rgba(255,255,255,0.5);}
    25%{-webkit-transform:translate(-2px,0.5px) skew(0deg,5deg);}
    50%{-webkit-transform:translate(0px,-0.5px) skew(0deg,2deg);}
    75%{-webkit-transform:translate(2px,0.5px) skew(0deg,0deg);}
    100%{-webkit-transform:translate(0px,0px) skew(0deg,2deg);border:1px solid rgba(255,255,255,0.5);}
}

.pink .water{ background:-webkit-linear-gradient(-85deg,rgba(255,0,204,0.35),rgba(210,0,170,0.55) 70%,rgba(210,0,170,0.4)); -webkit-box-shadow:0px 0px 6px rgba(255,0,204,0.5) inset,0px 0.2px 3px -1px rgba(0,0,0,0.3) inset,0px 2px 6px -1px rgba(0,0,0,0.1) inset,0px 2px 5px rgba(255,0,204,0.3),0px 1px 3px rgba(255,0,204,0.2);}
.pink .water:after{ background:-webkit-linear-gradient(left,rgba(255,255,255,0.4),rgba(255,0,204,0.05) 50%,rgba(255,0,204,0.1) 80%,rgba(255,255,255,0.3)); -webkit-box-shadow:0px 1px 2px -1px rgba(255,0,204,0.35);}
.pink .water:before{ background:-webkit-linear-gradient(left,rgba(210,0,170,0.2),rgba(255,0,204,0.1) 50%,rgba(255,0,204,0.2) 80%,rgba(210,0,170,0.3)); -webkit-box-shadow:0px -2px 3px -1px rgba(255,0,204,0.25);}
.pink:before{ -webkit-box-shadow:0px 2px 10px -2px rgba(255,0,204,0.3),0px 2px 15px -2px rgba(255,0,204,0.4);}
.pink .bubble{-webkit-box-shadow:0px 0px 2px rgba(255,255,255,0.6) inset,-1px 1px 2px -1px rgba(255,0,204,0.1);}

.yellow .water{ background:-webkit-linear-gradient(-85deg,rgba(255,240,20,0.35),rgba(233,217,0,0.55) 70%,rgba(233,217,0,0.4)); -webkit-box-shadow:0px 0px 6px rgba(255,240,20,0.5) inset,0px 0.2px 3px -1px rgba(0,0,0,0.3) inset,0px 2px 6px -1px rgba(0,0,0,0.1) inset,0px 2px 5px rgba(255,240,20,0.3),0px 1px 3px rgba(255,240,20,0.2);}
.yellow .water:after{ background:-webkit-linear-gradient(left,rgba(255,255,255,0.4),rgba(255,240,20,0.05) 50%,rgba(255,240,20,0.1) 80%,rgba(255,255,255,0.3)); -webkit-box-shadow:0px 1px 2px -1px rgba(255,240,20,0.35);}
.yellow .water:before{ background:-webkit-linear-gradient(left,rgba(233,217,0,0.2),rgba(255,240,20,0.1) 50%,rgba(255,240,20,0.2) 80%,rgba(233,217,0,0.3)); -webkit-box-shadow:0px -2px 3px -1px rgba(255,240,20,0.25);}
.yellow:before{ -webkit-box-shadow:0px 2px 10px -2px rgba(255,240,20,0.3),0px 2px 15px -2px rgba(255,240,20,0.4);}
.yellow .bubble{-webkit-box-shadow:0px 0px 2px rgba(255,255,255,0.6) inset,-1px 1px 2px -1px rgba(255,240,20,0.1);}

.green .water{ background:-webkit-linear-gradient(-85deg,rgba(90,230,0,0.35),rgba(70,190,0,0.55) 70%,rgba(70,190,0,0.4)); -webkit-box-shadow:0px 0px 6px rgba(90,230,0,0.5) inset,0px 0.2px 3px -1px rgba(0,0,0,0.3) inset,0px 2px 6px -1px rgba(0,0,0,0.1) inset,0px 2px 5px rgba(90,230,0,0.3),0px 1px 3px rgba(90,230,0,0.2);}
.green .water:after{ background:-webkit-linear-gradient(left,rgba(255,255,255,0.4),rgba(90,230,0,0.05) 50%,rgba(90,230,0,0.1) 80%,rgba(255,255,255,0.3)); -webkit-box-shadow:0px 1px 2px -1px rgba(90,230,0,0.35);}
.green .water:before{ background:-webkit-linear-gradient(left,rgba(70,190,0,0.2),rgba(90,230,0,0.1) 50%,rgba(90,230,0,0.2) 80%,rgba(70,190,0,0.3)); -webkit-box-shadow:0px -2px 3px -1px rgba(90,230,0,0.25);}
.green:before{ -webkit-box-shadow:0px 2px 10px -2px rgba(90,230,0,0.3),0px 2px 15px -2px rgba(90,230,0,0.4);}
.green .bubble{-webkit-box-shadow:0px 0px 2px rgba(255,255,255,0.6) inset,-1px 1px 2px -1px rgba(90,230,0,0.1);}

.jellyfish{-webkit-animation:jellyfishSwimming 4s linear infinite alternate;}
.jellyfish_head{-webkit-border-radius:20px 20px 10px 10px/20px 20px 16px 16px; -webkit-box-shadow:0px 0px 4px rgba(255,255,255,0.5) inset,1px 1px 2px rgba(255,255,255,0.2) inset,3px 3px 1px rgba(255,255,255,0.2) inset,-1px -1px 1px rgba(255,255,255,0.1) inset; -webkit-animation:jellyfish_headChange 4s linear infinite alternate;}
.jellyfish_head:after{-webkit-border-radius:5px/3px; -webkit-transform:rotate(-15deg); -webkit-box-shadow:0px 0px 1px rgba(255,255,255,0.8) inset;}

.jellyfish_tail{[;border-width:1px;]; -webkit-border-radius:10px 10px 16px 6px/20px 20px 6px 6px; -webkit-box-shadow:0px 0px 3px rgba(255,255,255,0.3) inset,0px 4px 3px rgba(255,255,255,0.1) inset; -webkit-transform-origin:50% 0%; -webkit-animation:jellyfish_tailChange 4s linear infinite alternate;}
.jellyfish_tail:after{[;border-width:1px;];-webkit-border-radius:10px/10px 20px 16px 16px; -webkit-box-shadow:0px 0px 3px rgba(255,255,255,0.3) inset,0px 3px 3px rgba(255,255,255,0.2) inset;}
.jellyfish_tail:before{[;border-width:1px;];-webkit-border-radius:15px 10px 16px 16px/30px 30px 8px 8px; -webkit-box-shadow:0px 0px 3px rgba(255,255,255,0.3) inset; -webkit-transform:rotate(-6deg);}
.jellyfish_tail_in{[;border-width:1px;];-webkit-border-radius:10px 20px 16px 10px/20px 20px 6px 20px; -webkit-box-shadow:3px 0px 3px rgba(255,255,255,0.2) inset; -webkit-transform:rotate(14deg);}



@-webkit-keyframes jellyfishSwimming{
    0%{-webkit-transform:translate(0px,0px) rotate(-4deg) scale(0.8);}
    20%{-webkit-transform:translate(-1px,-3px) rotate(-6deg) scale(0.8);}
    50%{-webkit-transform:translate(-2px,-1px) rotate(-3deg) scale(0.8);}
    70%{-webkit-transform:translate(-1px,-3px) rotate(-6deg) scale(0.8);}
    100%{-webkit-transform:translate(0px,0px) rotate(-4deg) scale(0.8);}
}

@-webkit-keyframes jellyfish_headChange{
    0%{-webkit-transform:scale(1);}
    5%{-webkit-transform:scale(1.1,0.95);}
    20%{-webkit-transform:scale(0.95,1.1);}
    50%{-webkit-transform:scale(1);}
    55%{-webkit-transform:scale(1.1,0.95);}
    70%{-webkit-transform:scale(0.95,1.1);}
    100%{-webkit-transform:scale(1);}
}

@-webkit-keyframes jellyfish_tailChange{
    0%{-webkit-transform:scale(0.8);}
    5%{-webkit-transform:scale(0.9,0.75);}
    20%{-webkit-transform:scale(0.7,1);}
    50%{-webkit-transform:scale(0.8);}
    55%{-webkit-transform:scale(0.9,0.75);}
    70%{-webkit-transform:scale(0.7,1);}
    100%{-webkit-transform:scale(0.8);}
}

</style>
</head>

<body>
<div class="main">

    <div class="bottle">
        <div class="bottle_top">
            <div class="bottle_mouth"></div>
            <div class="highlight"></div>
        </div>
        <div class="bottle_neck">
            <div class="highlight"></div>
        </div>
        <div class="bottle_main">
            <div class="bottle_inner">
                <div class="water">
                
                    <div class="cloverTop">
                        <div class="clover">
                            <div class="leaves">
                                <i class="leave angleN"></i>
                                <i class="leave angleS"></i>
                                <i class="leave angleW"></i>
                                <i class="leave angleE"></i>
                            </div>
                            <i class="branch"></i>
                        </div>
                    </div>
                    <div class="cloverBottom">
                        <div class="clover">
                            <div class="leaves">
                                <i class="leave angleN"></i>
                                <i class="leave angleS"></i>
                                <i class="leave angleW"></i>
                                <i class="leave angleE"></i>
                            </div>
                            <i class="branch"></i>
                        </div>
                    </div>
                        
                    <div class="jellyfish" style="display:none;">
                        <div class="jellyfish_head"></div>
                        <div class="jellyfish_tail">
                        <div class="jellyfish_tail_in"></div>
                        </div>
                        
                    </div>    
                        
                    <div class="bubble bubble1"></div>
                    <div class="bubble bubble2"></div>
                    <div class="bubble bubble3"></div>
                </div>
            </div>
            <div class="highlight"></div>
        </div>
    </div>
    
</div>
</body>
</html>



效果:


image


那个水会左右移动,还有泡泡往上冒.


 


二.开始分析


2.1.删除所有数据,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>

<body>
<div class="main">
     <div class="bottle">
      <div class="bottle_top">
          <div class="bottle_mouth"></div>
          <div class="highlight"></div>
      </div>
      <div class="bottle_neck">
          <div class="highlight"></div>
      </div>
      <div class="bottle_main">
          <div class="bottle_inner">
              <div class="water">
              
                  <div class="cloverTop">
                      <div class="clover">
                          <div class="leaves">
                              <i class="leave angleN"></i>
                              <i class="leave angleS"></i>
                              <i class="leave angleW"></i>
                              <i class="leave angleE"></i>
                          </div>
                          <i class="branch"></i>
                      </div>
                  </div>
                  <div class="cloverBottom">
                      <div class="clover">
                          <div class="leaves">
                              <i class="leave angleN"></i>
                              <i class="leave angleS"></i>
                              <i class="leave angleW"></i>
                              <i class="leave angleE"></i>
                          </div>
                          <i class="branch"></i>
                      </div>
                  </div>
                      
                  <div class="jellyfish" style="display:none;">
                      <div class="jellyfish_head"></div>
                      <div class="jellyfish_tail">
                      <div class="jellyfish_tail_in"></div>
                      </div>
                      
                  </div>    
                      
                  <div class="bubble bubble1"></div>
                  <div class="bubble bubble2"></div>
                  <div class="bubble bubble3"></div>
              </div>
          </div>
          <div class="highlight"></div>
      </div>
  </div>
    
</div>
</body>
</html>


它看起来像这样,什么都没有


image


2.2加些瓶子外面的CSS


*{ margin:0px; padding:0px;}
body{ background:#ddd;}
.main{ margin:50px auto; width:400px;}

.bottle{ width:100px; position: relative;}
.bottle:after{ content:''; display:block; height:14px; width:100px; -moz-border-radius:46px/10px; -moz-box-shadow:0px 1px 4px -2px rgba(0,0,0,0.2),0px 2px 10px -3px rgba(0,0,0,0.1);  position:absolute; bottom:-7.6px; z-index:0;}
.bottle:before{ content:''; display:block; height:14px; width:100px; -moz-border-radius:46px/10px; -moz-box-shadow:0px 2px 10px -2px rgba(0,204,255,0.3),0px 2px 15px -2px rgba(0,204,255,0.4);  position:absolute; bottom:-7.6px; z-index:0; display:none;}





大概是说位置相关的.


image


好像没有什么用. 而且那个*我知道,是所有的元素. body是主文档.main瓶子父层 .bottle瓶子.


margin padding width position 都是位置相关的 backgound 是背景色


2.3 理解:after  : before关键字



那个:after  : before我没有用过,所以查找这篇文档说明  CSS实例教程;使用:before和:after插入内容

在css中，我们可以使用:before伪元素选择器与:after伪元素选择器在页面的前面和后面以content属性的方式插入内容。


某示例: 在前面后面补上字符
#div1 { border: 1px solid #090; padding: 10px; font-size: 14px; margin-bottom: 10px; } #div1:before{ content:"【";     color:#f00;     font-family:Arial; } #div1:after{ content:"】";     color:#f00;     font-family:Arial; }
 
<div id="div1">插入内容</div>



变成这样:


image


示例2:某些元素不使用样式

css样式：
div { border: 1px solid #090; padding: 10px; font-size: 14px; margin-bottom: 10px; } div:before{ content:"【";     color:#f00;     font-family:Arial; } div:after{ content:"】";     color:#f00;     font-family:Arial; } .div2:after{     content:none;     /*content:normal;*/     }
html代码：
<div>插入内容</div><div class="div2">插入内容</div>


运行:

image


示例3: 在前面后面补上某字符串

h1{     quotes:"(" ")";     }     h1:before{     content:open-quote;     }     h1:after{     content:close-quote;     }     h2:before{ content:"\\";     }     h2:after{     content:"\\";     }
html代码：
<h1>标题</h1><h2>标题h2</h2>



运行:


image



示例4: 只在第一个子元素前加上图片

css样式：
div { border: 1px solid #090; padding: 10px; font-size: 14px; margin-bottom: 10px; } div:first-child:after{ content:url(new.gif);     margin-left:5px; }
html代码：
<div>插入内容</div><div>插入内容</div><div>插入内容</div><div>插入内容</div>



运行:


image


示例5:在元素后面自动加上它的ID

css样式：
div { border: 1px solid #090; width:78px;    height:59px;    padding:3px;    position:relative;}div:after{ content:attr(id);    display:block;    color:#f00;    font-weight:bold;    position:absolute;    top:0;    right:0;}
html代码：
<div id="test" title="idtitle" style="width:78px;">文字内容</div>



运行:


image


示例6:把当鼠标移到图片上时面,显示图片的ALT属性

css样式：
div { border: 1px solid #090; width:78px;     height:59px;     padding:3px; } div img:hover{ box-shadow:0 0 3px #666; }     div img:hover:after{     content:attr(alt);     display:block;     height:20px;     line-height:20px; background:#666;     opacity:0.8;     margin-top:-20px;     color:#fff;     text-align:center;     font-size:12px;     }
html代码：
<div><img src="d9.jpg" alt="图片标题" title="图片2" /></div>



运行:


image


示例7:插入项目编号

css样式：
h1{     counter-increment:mycounter;     }     h1:before{     content:counter(mycounter);     }
html代码：
<h1>大标题</h1>    <h1>大标题</h1>    <h1>大标题</h1>
来看一下浏览器中的表现（ff3.6/4.0/7.0、chrome14、safari5、opera10.6、ie8）



运行:


image


示例8:插入第 项目编号 章这种项目编号

css样式：
h1{     counter-increment:mycounter;     }     h1:before{     content:"第"counter(mycounter,upper-roman)"章 ";     }
html代码：
<h1>大标题</h1>    <h1>大标题</h1>    <h1>大标题</h1>





运行:


image


示例9:插入编号嵌套

css样式：
dt{     counter-increment:btitle;     }     dd{     counter-increment:stitle;     }     dt:before{     content:counter(btitle)".";     } dd:before{     content:counter(btitle)"."counter(stitle)".";     }
html代码：
<dl>     <dt>大标题</dt>     <dd>小标题</dd>     <dd>小标题</dd>     <dt>大标题</dt>     <dd>小标题</dd>     <dd>小标题</dd>     <dt>大标题</dt>     <dd>小标题</dd>     <dd>小标题</dd>     <dt>大标题</dt>     <dd>小标题</dd>     <dd>小标题</dd>     <dd>小标题</dd>    </dl>



运行:


image



示例10:插入修正的编号嵌套 重置功能

dt{     counter-increment:btitle;     counter-reset:stitle;     }     dd{     counter-increment:stitle;     }     dt:before{ content:counter(btitle)".";     }     dd:before{     content:counter(btitle)"."counter(stitle)".";     }



运行:


image


现在回来解理

.bottle:after{ content:''; display:block; height:14px; width:100px; -moz-border-radius:46px/10px; -moz-box-shadow:0px 1px 4px -2px rgba(0,0,0,0.2),0px 2px 10px -3px rgba(0,0,0,0.1);  position:absolute; bottom:-7.6px; z-index:0;}
.bottle:before{ content:''; display:block; height:14px; width:100px; -moz-border-radius:46px/10px; -moz-box-shadow:0px 2px 10px -2px rgba(0,204,255,0.3),0px 2px 15px -2px rgba(0,204,255,0.4);  position:absolute; bottom:-7.6px; z-index:0; display:none;}



在瓶子的前面插入一块层100*14px, 四个圆角系数为 46/10px, 出门一下...


2.4

Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)