Sunny chen

Sunny chen

…为了一句:“细节体现专业” 拼命搞前端重构的天天脸上挂着一副淫荡表情的漫画插画羽毛球男单宅男…

css3

CSS3实现四叶草、水母与玻璃瓶

以下为纯CSS制作,闲话不说,上个效果图先: 玻璃瓶质感、四叶草漂浮于水面,荡起涟漪、摇摆上升的气泡…很美的意境,然而你也许会说你喜欢瓶子不喜欢四叶草,那可以把四叶草给none掉,不喜欢植物的话,那你喜不喜欢动物呢: 应该看得懂这只萌物是什么生物吧..没错,水母 一只…众生皆平等,不能只有植物没有动物哈… 然而你也许不喜欢蓝色的水,那我写几套多彩的玻璃瓶: 如果你感兴趣的话,可以通过这个链接,下载我的源代码:《四叶草、水母与玻璃瓶》 为方便下载,提供本人网盘帐号密码,请不要弄乱里面的页面,以方便其它人下载,谢谢。 帐号:287019674@qq.com 密码:123456 下面是对代码的分析: 一、四叶草 四叶草的代码结构如下: 一个leaves挂着叶子,叶瓣用四个I标签表示,一个branch代表叶茎 1) 叶瓣 每 个叶瓣都是一个leave,然后用angle控制它们的旋转,然而一个leave的话是画不出一个心形的,所以我用多了一个leave:

css3

纯CSS3透明水晶盒

相信大家有看过这个例子:3D盒子,在书《CSS3 实战》上第282页有个综合实战“设计动态立体盒子”的例子,实现方式跟它一样,我的盒子也是以它为原型来设计的,不过在实现方面有做修改、优化,以及增添了一些细节,下面是我的盒子Firefox截图: 透明化了盒子,通透性强了,因为透明了,所以背部的三个面也就要做出来了,所以总共6个面,比原作多3个; 投影镜像,让盒子的立体感更强烈; 边角线的处理,让盒子面与面之间过渡和谐。 你可以点击这里下载 源代码(只是写了moz下的效果,webkit的就没写了) 盒子的HTML结构很简单,如下: 前 后 左 右 上 下 一个大盒子包住“前、后、左、右、上、下”6个面,因为定位产生层高的关系,所以它的顺序其实是“后、下、左、前、

css3

纯CSS3文字 渐变内发光投影效果

前阵子做了个css3文字效果,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考。发个效果图大家看先: 投影shadow box-shadow 一般我们都是用css3的box-shadow来实现盒投影,用text-shadow来实现文字投影,box-shadow设置方型盒子投影,用raidus的话可以让盒子产生圆角,看起来就很圆滑舒服,一般的写法是这样的: -moz-box-shadow:1px 1px 5px #000; 1px(水平方向偏移)  1px(垂直方向偏移)  5px(阴影羽化)  #000(颜色); 当偏移量为负数时就向反方向偏移,试试就明白了,这里不贴图。 这个是一般的投影效果,如果是内阴影,那么就加个inset属性,写法如下: -moz-box-shadow:**inset** 1px 1px 5px #000; 这样就变成了PS里面的内阴影,效果很赞,很实用,如果需要内发光效果,则背景底色深,投影颜色浅,这样就会感觉是发光,而背景颜色深,