CSS3逼真水珠特效- www.shouce.ren

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);}

總結

以上是生活随笔為你收集整理的css 水珠动图,CSS3逼真水珠特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。