论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准，xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

div+CSS教程：四叶草浮在水面的效果显示

文章类别：div+css | 发表日期:2012-6-6 11:57:35

div+CSS教程：四叶草浮在水面的效果显示


   

四叶草、水母与玻璃瓶

    既然说穿过了，还要摇曳，那么必然有涟漪，总共有两个涟漪，用cloverBottom:after、cloverBottom:before实现，具体重点代码如下：

1
2
3
4
5
6
7
8

.cloverBottom:after{
border:0.5px solid rgba(255,255,255,0.3);
-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;
}

    设置好边框样式，但是由于太小了，四条都显示的话画面太复杂了，所以隐藏掉后面跟右边的两条，下面的调整边框颜色，在设置一个0.2黑色的内投影，调整好 圆角的曲率，做出一个涟漪的大致效果，after做一个小涟漪，before做一个大涟漪，基本制作方式一致，这里就不分析了；

上次的Css相关文章里面，给大家介绍了如何去制作四叶草和玻璃瓶里面的注满水的效果制作方法，今天继续给大家介绍如何让四叶草漂浮在水面上；

四叶草浮在水面
    我们知道，图层之间只有上下之分，没有穿过的，四叶草下部分需要泡在水里，而上部分需要浮出水面，我不可能把水切成两段，所以我把四叶草分成了上下两部分 cloverTop和cloverBottom，类似于一个模板操作，固定宽高后hidden掉不要的那部分，再拼接起来，从而实现漂浮，穿过水面的效，实现效果如下：
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058