看,是谁在跳舞!---- 纯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属性来调用,方便易用。
大概说到这里了,有好奇心的童鞋可以自己动手试哈,蛮好玩的……或者有更好实现方法的,请在此做个分享,先谢过了!