CSS3逼真水珠特效

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CSS3逼真水珠特效- www.shouce.ren</title>
<style>
body{background: #013668;}
#pepsi{position: absolute;left: 30%;top: 30%;}
#pepsi .drop{border: 1px solid rgba(0,0,0,0.3);border-radius: 26px/30px;box-shadow: 0 2px 2px rgba(0,0,0,0.3);height: 30px;opacity: 0.6;position: absolute;width: 26px;}
#pepsi .drop: before{background: -moz-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);/* FF3.6+*/background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,1)),color-stop(30%,rgba(255,255,255,1)),color-stop(70%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,0)));/* Chrome,Safari4+*/background: -webkit-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);/* Chrome10+,Safari5.1+*/background: -o-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);/* Opera11.10+*/background: linear-gradient(top,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);/* W3C*/border-radius: 20px;content: "drop";height: 20px;left: 4px;position: absolute;text-indent: -9999px;top: 2px;width: 18px;}
#pepsi .drop: after{border-radius: 26px;background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%);/* FF3.6+*/background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(50%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.5)));/* Chrome,Safari4+*/background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%);/* Chrome10+,Safari5.1+*/background: -o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%);/* Opera11.10+*/background: linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%);/* W3C*/box-shadow: 0 2px 0 #fff;content: "drop";height: 24px;left: 1px;position: absolute;text-indent: -9999px;top: 3px;width: 24px;}
#pepsi .drop1{left: 80px;top: 80px;}
#pepsi .drop2{left: 33px;top: 50px;-o-transform: scale(0.6);-moz-transform: scale(0.6);-ms-transform: scale(0.6);-webkit-transform: scale(0.6);transform: scale(0.6);}
#pepsi .drop3{left: 150px;top: 136px;-o-transform: scale(0.7);-moz-transform: scale(0.7);-ms-transform: scale(0.7);-webkit-transform: scale(0.7);transform: scale(0.7);}
#pepsi .drop4{left: 145px;top: 169px;}
#pepsi .drop5{left: 130px;top: 26px;-o-transform: scale(0.9);-moz-transform: scale(0.9);-ms-transform: scale(0.9);-webkit-transform: scale(0.9);transform: scale(0.9);}
#pepsi .drop6{left: 50px;top: 138px;-o-transform: scale(0.7);-moz-transform: scale(0.7);-ms-transform: scale(0.7);-webkit-transform: scale(0.7);transform: scale(0.7);}
</style>
</head>
<body>
<div id="pepsi">
<div class="drop1 drop"></div>
<div class="drop2 drop"></div>
<div class="drop3 drop"></div>
<div class="drop4 drop"></div>
<div class="drop5 drop"></div>
<div class="drop6 drop"></div>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3逼真水珠特效

分类

CSS3

描述

HTML5CSS3实现的逼真水珠效果，可以看作是一个canvas实例，应该说canvas真是一个好东西，熟悉掌握了你可以抛弃图片了，呵呵，至少来说，网页上的那些修饰性的小图片可以用canvas来实现了。