使用css实现水珠/水滴效果

我：ui，这里需要一个水珠效果图
ui：现在没空，你不能自己在网上找一个或者自己做一个吗？
我：啊这…
我：行吧，你空了给我做一下
ui：…哦可

手写就手写，谁怕谁，直接开干。

这里我们在一个新建的html中编写。

新建一个html。

在head标签中新建一个style标签，并去除多余边距。

这里为什么需要去除多余的边距呢？

是因为有些内核的浏览器会默认自带一些边距，为了在所有浏览器中看起来都是一样的效果，我们需要给它去除掉，也就是初始化一次。


<style>* {margin: 0;padding: 0;}
</style>

在body中新建一个div盒子用来呈现我们的水珠效果，我们先给他加个class类名为water


<div class="water" ></div>

我们接下来给body加个宽高和颜色，方便看我们的水珠效果


<style>body{width: 100vw;height: 100vh;background-color: aquamarine;}
</style>

在我们的浏览器中打开我们的html，除了body有颜色之外，其他啥也没有，如下图

我们给刚刚声明的.water类名添加基础样式

    .water{width: 100px;height: 100px;margin: 100px 50px;/* 前期使用，方便看效果 */border: 1px solid black;}

现在就有一个这样黑色的框框了

这啥呀？就一个黑色的框框哪里是水珠了。哎，别急嘛，我们给他加个border-radius看看

    .water{width: 100px;height: 100px;margin: 100px 50px;/* 前期使用，方便看效果 */border: 1px solid black;border-radius: 61% 39% 57% 43% / 46% 67% 33% 54%;}

现在看起来是不是有哪个轮廓了。

emmm…还是不像。

还有我之前都没见过border-radius这种写法，啥意思呢？

解释一哈：

这种写法一般很少使用，我们都是使用的简写。

简写：

border-radius: 50%;

转成全写就长这样

border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;

那你还是没有说是啥意思嘛，诶，解释它来了：

/ 前的四个数值表示圆角的水平半径

/ 后的四个数值表示圆角的直角半径

看张图，就知道所以然了。

如果还是不是很明白，我们又来画张图
下面代码中使用的简写方式，转成全写就是这样的border-radius: 50px 50px 50px 50px / 40px 40px 40px 40px;


border-radius: 50px / 40px;

相信你们这样就懂了。

谨记：不论是圆角矩形、椭圆还是圆形，它所根据的是水平半径和垂直半径的值，根据这个给元素设置圆角的弧度。
所以一定要记住border-radius的完整写法，才能深刻的从根本上知道这“狡猾”的代码是怎么计算生成最终的图形样式的。

补充了一点border-radius的相关知识，我们继续，上面我们实现了一个黑色的框框，下面我们来给它添加内阴影，让它看起来更逼真。并且去掉才开始添加的border，不去掉的话看起来有点丑。

    .water{width: 100px;height: 100px;margin: 100px 50px;/* border: 1px solid black; */border-radius: 61% 39% 57% 43% / 46% 67% 33% 54%;box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5),10px 10px 20px rgba(0, 0, 0, 0.3),15px 15px 30px rgba(0, 0, 0, 0.05),inset -10px -20px 30px rgba(255, 255, 255, 0.8);}

这里我就不说box-shadow了，我直接上MDN的链接地址。

为什么不说呢？打字累啊

使用css实现水珠/水滴效果相关推荐

50款水滴效果PS笔刷
50 Water Drops Photoshop Stamp Brushes是一套水珠水滴效果PS笔刷,包含50款不同效果的笔刷样式,这种画笔纹理是高分辨率的,可以用于多种用途,例如卡片,邀请函,横幅 ...
React封装一个纯CSS实现的水滴样式的盒子
背景刷B站刷到一个纯css实现的水滴效果的视频感觉真不错,决定封装一个具有水滴效果的盒子(DIV) 涉及知识点 CSS样式,核心是这个和box-shadow阴影,实现水滴boder和阴影效果. J ...
html涟漪动画效果,CSS+JS实现水滴涟漪动画按钮效果的示例代码
代码如下所示: Document .btn{ display: block; width: 300px; height: 100px; margin: 50px; outline: 0; overfl ...
JS动画 | 用TweenMax实现收集水滴效果
之前在CodePen上接触了TweenMax, 被它能做到的酷炫效果震撼了. (文末放了5个GSAP的效果GIF) 最近要做一个"收集水滴"的动效, 于是就试用了一下TweenMa ...
html背景只向x轴扩散,有趣的css—简单的下雨效果2.0版
有趣的css-简单的下雨效果2.0版推荐原创 Fatman_2021-05-18 13:37:36©著作权文章标签 css 阅读数 1119 ©著作权归作者所有:来自51CTO博客作者Fatma ...
css玻璃雨滴效果,CSS实现雨滴动画效果的实例代码
玻璃窗今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
html实现的动画效果代码,CSS实现雨滴动画效果的实例代码
玻璃窗今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
web前端入门到实战：CSS实现雨滴动画效果
玻璃窗今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. <div class='window'></div> ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...

使用css实现水珠/水滴效果

使用css实现水珠/水滴效果相关推荐

最新文章

热门文章