效果展示

源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>*{margin: 0;padding: 0;}body{display: flex;justify-content: center;box-sizing: border-box;background-color: #2ecc71;}#water{position: relative;width: 300px;height: 300px;margin-top: 100px;border-radius: 24% 63% 66% 31% / 53% 38% 61% 45% ;box-shadow: inset 10px 10px 20px rgba(0,0,0,0.5),10px 15px 20px rgba(0,0,0,0.4),10px 15px 30px rgba(0,0,0,0.4),inset -10px -10px 15px rgba(253, 253, 253, 0.8);        animation: begins 3s linear infinite alternate;}#water::after{content: '';position: absolute;background-color: rgba(237, 236, 236, 0.952);width: 15px;height: 15px;left: 150px;top: 60px;border-radius: 43% 54% 63% 32% / 30% 55% 49% 70% ;}#water::before{content: '';position: absolute;background-color: rgba(236, 235, 235, 0.952);width: 20px;height: 20px;left: 100px;top: 50px;border-radius: 43% 54% 63% 32% / 30% 55% 49% 70% ;}@keyframes begins {25%{border-radius: 40% 59% 75% 34% / 31% 50% 75% 70%  ;}50%{border-radius: 45% 60% 36% 66% / 31% 30% 75% 70%  ;}100%{border-radius: 40% 59% 18% 96% / 31% 50% 75% 70%   ;}}
</style>
<body><div id="water"></div>
</body>
</html>

CSS篇--水滴效果(附源码)相关推荐

php jquery ajax登录,jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍 ...
html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
Android简单、高性能的高斯模糊（毛玻璃）效果(附源码)
毛玻璃效果相信很多朋友都眼红很久了, 隔壁ios系统对高斯模糊早就大范围使用了, 咱们Android却丝毫不为所动, 于是就只能靠广大开发者咯. 这是目前市面上性能最高的方案, 也不知道最初是哪位大神 ...
html5 相册系统php源码,HTML5 CSS3打造相册效果附源码下载
今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下. 效果图: 效果是不是还是很不错的,最主要的是没有使用一行j ...
一个炫酷的opengles2.0翻页效果（安卓上opengles2.0 翻书效果附源码）
写了一个opengles2.0的小效果,平台是安卓,给各位朋友们看一看,有兴趣想要源码的朋友可以email我 5358951@qq.com. 先看效果前言 1.在安卓上实用opengles进行开 ...
html图片自动滚动播放器,jQuery+css实现图片滚动效果(附源码)
bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间 ...
【常见CSS扫盲之渐变效果】好看的24种CSS渐变效果汇总（附源码）
[写在前面]web开发过程中,页面背景色想要一个渐变的效果很多时候网上一找全是官网那种很丑的色系,尤其是一些按钮和一些大背景色时候,不能搞得很yellow,今天我就做个工具人给大家罗列一些我在工作过程 ...
html5效果源码,10款web前端值得学习的 HTML5 效果附源码
1.jQuery右侧Tab选项卡的焦点图插件这是一款基于jQuery的焦点图插件,和之前介绍的jQuery焦点图插件类似,它以淡入淡出的动画方式来切换图片,该焦点图插件的特点是右侧有一排Tab选项卡 ...
简单玩转ViewPager+Fragment动画效果，实现京东淘宝物流卡片效果 (附源码)
物流卡片Demo 新版的京东和淘宝有一个交互感觉不错, 待收货订单会有类似探探那样的卡片效果, 滑动查看下一条物流的信息, 近期UI部门说要做这个效果, 于是我就写了一个Demo, 现在分享出来和大家 ...

CSS篇--水滴效果(附源码)

效果展示

源码

CSS篇--水滴效果(附源码)相关推荐

最新文章

热门文章