CSS3逼真水珠特效

2024-09-05 12:18:55

字体：大中小

来源：转载

供稿：网友

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

<!DOCTYPE html><html><head><meta charset=utf-8 /><title>CSS3逼真水珠特效- www.codefans.net</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>

上一篇：CSS3 canvas示例：漂亮 Logo

下一篇：CSS3设计出花朵图案的网站Logo标志