看，是谁在跳舞！---- 纯CSS3手工打造容量瓶养殖水生动植物
闲暇无事，参考着做了个CSS3小demo，拿出来晒晒！
先看下预览效果（亲，记得要在现代浏览器下预览哦，使用IE的请绕过）：
查看demo
html部分
<div class="bottle"> <div class="bot_head"> <div class="bot_mouth"></div> <div class="head_light"></div> </div> <div class="bot_neck"> <div class="neck_light"></div> </div> <div class="bot_body"> <div class="bot_inner"> <div class="water"> <div class="clover"> <span class="leave angle_n"></span> <span class="leave angle_s"></span> <span class="leave angle_w"></span> <span class="leave angle_e"></span> </div> <div class="jellyfish"> <div class="jell_head"></div> <div class="jell_tail"></div> </div> <div class="bubble bubble1"></div> <div class="bubble bubble2"></div> </div> </div> <div class="body_light"></div> </div> </div>
CSS部分
body { margin:0 auto; background:#ccc; }
.bottle { width:100px; margin:100px auto; }
.bot_head { width:80px; height:30px; border:1px solid rgba(255,255,255,.5); border-top:none; border-bottom:none; margin:0 auto; position:relative; }
.bot_head:before,.bot_head:after { display:block; width:78px; height:10px; content:''; position:absolute; left:0; top:0;
border:2px solid rgba(255,255,255,.5);
border-top:1px solid rgba(255,255,255,.4);
border-bottom-color:rgba(255,255,255,.6);
border-radius:46px/10px;
box-shadow:0 0 6px rgba(255,255,255,.6) inset;
}
.bot_head:before { top:-6px; box-shadow:0 0 6px rgba(255,255,255,.4) inset; }
.bot_head:after { top:22px; box-shadow:0 0 6px rgba(255,255,255,.6) inset,0 3px 3px -1px rgba(255,255,255,.3);}
.bot_mouth { width:42px; height:50px; border:1px solid rgba(255,255,255,.3); border-top:none; border-bottom:none; margin:0 auto; position:relative;
background:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(255,255,255,.3));
background:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(255,255,255,.3));
background:-webkit-gradient(linear,center top,center bottom,from(rgba(255,255,255,.3)),color-stop(.5 rgba(255,255,255,0)),color-stop(.95 rgba(255,255,255,0)),to(rgba(255,255,255,.3)));
background:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(255,255,255,.3));
box-shadow:0 0 6px rgba(255,255,255,.3);
}
.bot_mouth:after { display:block; width:42px; height:6px; border:1px solid rgba(255,255,255,.5); position:absolute; left:-1px; top:-4px; z-index:1; content:'';
border-radius:24px/6px;
box-shadow:0 0 6px rgba(255,255,255,.3);
}
.head_light { width:20px; height:28px; position:absolute; left:8px; top:5px;
background:-moz-linear-gradient(left,rgba(255,255,255,.1),rgba(255,255,255,.6) 4%,rgba(255,255,255,.2) 98%,rgba(255,255,255,0));
background:-webkit-linear-gradient(left,rgba(255,255,255,.1),rgba(255,255,255,.6) 4%,rgba(255,255,255,.2) 98%,rgba(255,255,255,0));
background:-webkit-gradient(linear,left center, right center,from(rgba(255,255,255,.1)),color-stop(.4 rgba(255,255,255,.6)),color-stop(.98 rgba(255,255,255,.2)),to(rgba(255,255,255,0)));
background:-o-linear-gradient(left,rgba(255,255,255,.1),rgba(255,255,255,.6) 4%,rgba(255,255,255,.2) 98%,rgba(255,255,255,0));
}
.bot_neck { width:62px; height:20px; border:1px solid rgba(255,255,255,.5); border-top:none; border-bottom:none; margin:0 auto; position:relative; }
.bot_neck:before,.bot_neck:after { display:block; width:62px; height:8px; border:1px solid rgba(255,255,255,.5); border-top:none; content:''; position:absolute; left:-1px;
border-radius:30px/8px;
}
.bot_neck:before { top:14px; }
.bot_neck:after { top:-8px; box-shadow:0 5px 3px -2px rgba(0,0,0,.05); }
.neck_light { width:15px; height:18px; position:absolute; left:0; top:3px;
background:-moz-linear-gradient(left,rgba(255,255,255,.1),rgba(255,255,255,.3) 4%,rgba(255,255,255,.1) 98%,rgba(255,255,255,0));
background:-webkit-linear-gradient(left,rgba(255,255,255,.1),rgba(255,255,255,.3) 4%,rgba(255,255,255,.1) 98%,rgba(255,255,255,0));
background:-webkit-gradient(linear,left center,right center,from(rgba(255,255,255,.1)),color-stop(.4 rgba(255,255,255,.3)),color-stop(.98 rgba(255,255,255,.1)),to(rgba(255,255,255,0)));
background:-o-linear-gradient(left,rgba(255,255,255,.1),rgba(255,255,255,.3) 4%,rgba(255,255,255,.1) 98%,rgba(255,255,255,0));
}
.bot_body { width:98px; height:150px; border:1px solid rgba(255,255,255,.5); border-top:none; border-bottom:none; position:relative; }
.bot_body:before,.bot_body:after { display:block; width:96px; height:12px; position:absolute; left:-1px; content:'';
border:2px solid rgba(255,255,255,.5);
border-top:1px solid rgba(255,255,255,.3);
border-bottom:2px solid rgba(255,255,255,.6);
border-radius:46px/10px;
}
.bot_body:before { top:140px; box-shadow:0 0 6px rgba(255,255,255,.7) inset,0 0 3px rgba(0,0,0,.15) inset; }
.bot_body:after { top:-7px; box-shadow:0 0 6px rgba(255,255,255,.6) inset,0 3px 3px -1px rgba(255,255,255,.4),0 0 3px rgba(0,0,0,.05) inset,0 0 6px rgba(255,255,255,.7) inset,0 0 3px rgba(0,0,0,.15) inset; }
.bot_inner { width:92%; height:149px; margin:0 auto; position:relative;
border:1px solid rgba(0,0,0,.01);
border-top-color:rgba(255,255,255,.3);
border-bottom-width:0.5px;
border-radius:10px;
box-shadow:0 0 2px rgba(255,255,255,.5) inset,0 0 8px rgba(255,255,255,.6) inset,0 0 5px rgba(255,255,255,.5);
}
.water { width:98%; height:100px; margin:0 auto; position:absolute; left:1px; bottom:3px;
background:-moz-linear-gradient(-85deg,rgba(0,204,255,0.35),rgba(0,173,216,0.55) 70%,rgba(0,173,216,0.4));
background:-webkit-linear-gradient(-85deg,rgba(0,204,255,0.35),rgba(0,173,216,0.55) 70%,rgba(0,173,216,0.4));
background:-webkit-gradient(linear,-85deg,from(rgba(0,204,255,0.35)),color-stop(.7 rgba(0,173,216,0.55)),to(rgba(0,173,216,0.4)));
background:-o-linear-gradient(-85deg,rgba(0,204,255,0.35),rgba(0,173,216,0.55) 70%,rgba(0,173,216,0.4));
border-radius:50px 50px 20px 20px/8px 8px 10px 10px;
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:before,.water:after { display:block; width:89px; height:10px; border:1px solid rgba(255,255,255,.2); position:absolute; content:''; }
.water:before { left:-1px; bottom:0; border-color:rgba(255,255,255,.1); border-bottom:none;
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));
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));
background:-webkit-gradient(linear,left center,right center,from(rgba(0,173,216,0.2)),color-stop(.5 rgba(0,204,255,0.1)),color-stop(.8 rgba(0,204,255,0.2)),to(rgba(0,173,216,0.3)));
background:-o-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));
box-shadow:0px -2px 3px -1px rgba(0,204,255,0.25);
border-radius:50px/10px;
}
.water:after { left:-1px; top:0; border-bottom-color:rgba(255,255,255,.4);
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));
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));
background:-webkit-gradient(linear,left center,right center,from(rgba(255,255,255,0.4)),color-stop(.5 rgba(0,204,255,0.05)),color-stop(.8 rgba(0,204,255,0.1)),to(rgba(255,255,255,0.3)));
background:-o-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));
box-shadow:0px 1px 2px -1px rgba(0,204,255,0.35);
border-radius:50px/8px;
}
.clover { width:60px; height:60px; position:relative;
-moz-animation:clover 3s linear infinite;
-webkit-animation:clover 3s linear infinite;
-o-animation:clover 3s linear infinite;
animation:clover 3s linear infinite;
}
.leave,.leave:after { display:block; width:10px; height:16px; background:#2cb62c; position:absolute; border-radius:10px 10px 5px 5px; }
.leave { z-index:2; }
.leave:after { content:''; z-index:5; }
.angle_n { left:20px; top:-2px; }
.angle_n:after { -moz-transform:rotate(-45deg) translate(-6px,-4px);
-webkit-transform:rotate(-45deg) translate(-6px,-4px);
-o-transform:rotate(-45deg) translate(-6px,-4px);
transform:rotate(-45deg) translate(-6px,-4px);
}
.angle_s { left:20px; top:18px;
-moz-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
-webkit-transorm-origin:0 0;
}
.angle_s:after { -moz-transform:rotate(-45deg) translate(-8px,-4px);
-webkit-transform:rotate(-45deg) translate(-8px,-4px);
-o-transform:rotate(-45deg) translate(-8px,-4px);
transform:rotate(-45deg) translate(-8px,-4px);
}
.angle_w { top:7px; left:10px;
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform:rotate(-90deg);
-webkit-transorm-origin:0 0;
}
.angle_w:after { -moz-transform:rotate(-45deg) translate(-7px,-4px);
-webkit-transform:rotate(-45deg) translate(-7px,-4px);
-o-transform:rotate(-45deg) translate(-7px,-4px);
transform:rotate(-45deg) translate(-7px,-4px);
}
.angle_e { left:30px; top:7px;
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-transorm-origin:0 0;
}
.angle_e:after { -moz-transform:rotate(-45deg) translate(-7px,-4px);
-webkit-transform:rotate(-45deg) translate(-7px,-4px);
-o-transform:rotate(-45deg) translate(-7px,-4px);
transform:rotate(-45deg) translate(-7px,-5px);
}
@-moz-keyframes clover {
0% { -moz-transform:translate(0,0); }
20% { -moz-transform:translate(-3px,1px); }
40% { -moz-transform:translate(0,-1px); }
60% { -moz-transform:translate(4px,1px); }
80% { -moz-transform:translate(2px,0); }
100% { -moz-transform:translate(0,0); }
}
@-webkit-keyframes clover {
0% { -webkit-transform:translate(0,0); }
20% { -webkit-transform:translate(-3px,1px); }
40% { -webkit-transform:translate(0,-1px); }
60% { -webkit-transform:translate(4px,1px); }
80% { -webkit-transform:translate(2px,0); }
100% { -webkit-transform:translate(0,0); }
}
@-o-keyframes clover {
0% { -o-transform:translate(0,0); }
20% { -o-transform:translate(-3px,1px); }
40% { -o-transform:translate(0,-1px); }
60% { -o-transform:translate(4px,1px); }
80% { -o-transform:translate(2px,0); }
100% { -o-transform:translate(0,0); }
}
@keyframes clover {
0% { transform:translate(0,0); }
20% { transform:translate(-3px,1px); }
40% { transform:translate(0,-1px); }
60% { transform:translate(4px,1px); }
80% { transform:translate(2px,0); }
100% { transform:translate(0,0); }
}
.jellyfish { position:absolute; left:54px; bottom:10px;
-moz-animation:jellMove 4s linear infinite;
-webkit-animation:jellMove 4s linear infinite;
-o-animation:jellMove 4s linear infinite;
animation:jellMove 4s linear infinite;
}
.jell_head {width:20px; height:16px; background:rgba(255,255,255,.3); position:relative;
box-shadow:0 0 4px rgba(255,255,255,.5) inset,1px 1px 2px 0 rgba(255,255,255,.2) inset,3px 3px 1px 0 rgba(255,255,255,.2) inset,-1px -1px 1px rgba(255,255,255,.1) inset;
border-radius:20px 20px 10px 10px/20px 20px 16px 16px;
-moz-transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
-o-transform:rotate(-15deg);
transform:rotate(-15deg);
}
.jell_head:before { display:block; width:8px; height:6px; background:rgba(255,255,255,.5); position:absolute; top:3px; left:4px; content:'';
border-radius:7px;
}
.jell_tail { width:12px; height:14px; border:1px solid rgba(255,255,255,.5); border-top:none; border-bottom:none; position:relative;
box-shadow:1px 1px 0 rgba(255,255,255,.3) inset,0 0 6px -1px rgba(255,255,255,.5) inset;
border-radius:20px 20px 15px 15px/20px 20px 8px 8px;
-moz-transform:rotate(-15deg) translate(7px,0);
-webkit-transform:rotate(-15deg) translate(7px,0);
-o-transform:rotate(-15deg) translate(7px,0);
transform:rotate(-15deg) translate(7px,0);
}
@-moz-keyframes jellMove {
0% { opacity:.25; }
50% { opacity:.8; -moz-transform:scale(.5); }
100% { opacity:.25; }
}
@-webkit-keyframes jellMove {
0% { opacity:.25; }
50% { opacity:.8; -webkit-transform:scale(.5); }
100% { opacity:.25; }
}
@-o-keyframes jellMove {
0% { opacity:.25; }
50% { opacity:.8; -o-transform:scale(.5); }
100% { opacity:.25; }
}
@keyframes jellMove {
0% { opacity:.25; }
50% { opacity:.8; transform:scale(.5); }
100% { opacity:.25; }
}
.bubble { width:3px; height:3px; background:rgba(255,255,255,.4); position:absolute;
border-radius:5px;
}
.bubble1 { left:12px; bottom:20px;
-moz-animation:bubbleMove 5s linear infinite;
-webkit-animation:bubbleMove 5s linear infinite;
-o-animation:bubbleMove 5s linear infinite;
animation:bubbleMove 5s linear infinite;
}
.bubble2 { width:4px; height:4px; left:40px; bottom:12px;
-moz-animation:bubble2Move 10s linear infinite;
-webkit-animation:bubble2Move 10s linear infinite;
-o-animation:bubble2Move 10s linear infinite;
animation:bubble2Move 1s linear infinite;
}
@-moz-keyframes bubbleMove {
from{ bottom:10px; opacity:.8; }
to{ bottom:120px; opacity:.3; }
}
@-webkit-keyframes bubbleMove {
from{ bottom:10px; opacity:.8; }
to{ bottom:120px; opacity:.3; }
}
@-o-keyframes bubbleMove {
from{ bottom:10px; opacity:.8; }
to{ bottom:120px; opacity:.3; }
}
@keyframes bubbleMove {
from{ bottom:10px; opacity:.8; }
to{ bottom:120px; opacity:.3; }
}
@-moz-keyframes bubble2Move {
from{ bottom:5px; opacity:.8; }
to{ bottom:80px; opacity:.3; -moz-transform:scale(.6); }
}
@-webkit-keyframes bubble2Move {
from{ bottom:5px; opacity:.8; }
to{ bottom:80px; opacity:.3; -webkit-transform:scale(.6); }
}
@-o-keyframes bubble2Move {
from{ bottom:5px; opacity:.8; }
to{ bottom:80px; opacity:.3; -o-transform:scale(.6); }
}
@keyframes bubble2Move {
from{ bottom:5px; opacity:.8; }
to{ bottom:80px; opacity:.3; transform:scale(.6); }
}
.body_light { width:25px; height:143px; position:absolute; left:10px; top:6px; z-index:2;
background:-moz-linear-gradient(left,rgba(255,255,255,.2),rgba(255,255,255,.5) 4%,rgba(255,255,255,.2) 98%,rgba(255,255,255,0));
background:-webkit-linear-gradient(left,rgba(255,255,255,.2),rgba(255,255,255,.5) 4%,rgba(255,255,255,.2) 98%,rgba(255,255,255,0));
background:-webkit-gradient(linear,left center,right center,from(rgba(255,255,255,.2)),color-stop(.4 rgba(255,255,255,.5)),color-stop(.98 rgba(255,255,255,.2)),to(rgba(255,255,255,0)));
background:-o-linear-gradient(left,rgba(255,255,255,.2),rgba(255,255,255,.5) 4%,rgba(255,255,255,.2) 98%,rgba(255,255,255,0));
}
用点心，其实你会发现点击demo查看效果，就能看到源代码。这里我就不上了，简单分析一下它的实现原理：
从结构看，主要分为三大部分：即瓶盖、瓶颈与瓶子的主体。
一、瓶子 ---- 长方形 + 上下两面圆底 + 高光
长方形，不要上、下两条边，下下两面圆底可通过:before,:after来实现；
联想：其实瓶颈和主体部分与瓶盖一样，都是圆柱形，所以实现方法也是一样的，就不多说了。而主体部分里面的一层“心”可以再添加一个标签来控制，实现方法同上。这里主要运用CSS3的RGBA、border-radiius、box-shadow、linear-gradient等属性，用心调整一下必定会达到你想要的效果。
二、叶子、水母、泡泡 ---- 圆的变形
水母与泡泡其实都蛮好实现的， 这里着重说一下叶子的构成，首先是4个小的标签来组成上、下、左、右这四瓣叶子，然后利用他们的:before或者:after属性，再来生成旁边的一瓣叶子，通过旋转与移动（transform:rotate() translate(,)），则刚好形成一片叶子。
三、叶子、水母、泡泡 ---- 动画的制作
主要运用CSS3的keyframes+animation属性。先用keyframes来设置动画函数，需要时候再通过animation属性来调用，方便易用。
大概说到这里了，有好奇心的童鞋可以自己动手试哈，蛮好玩的……或者有更好实现方法的，请在此做个分享，先谢过了！
浙公网安备 33010602011771号