css特效之水滴效果

想看看效果：

html代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="index.css"/></head><body><div class="container"><div class="drop"></div><div class="drop"></div><div class="drop"></div><div class="collection"></div><span>80%</span></div></body>
</html>

css代码:

body{margin: 0;
}.container{display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #000000;flex-direction: column;filter:contrast(30)/* filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染 */
}.drop{position: absolute;width: 100px;height: 100px;background: #FFFFFF;border-radius: 50%;filter: blur(20px);opacity: 0;animation: 3s drop linear infinite;
}.drop:nth-child(2){animation-delay: .5s;
}
.drop:nth-child(3){animation-delay: .7s;
}.collection{width: 100px;height: 100px;background-color: #fff;border-radius: 50%;filter: blur(20px);animation: 3s collection linear infinite;animation-delay: 2s;
}
span{position: absolute;font-family: helvetica;font-size: 30px;
}
@keyframes collection{0%{transform: scale(1) rotate(0deg);}50%{transform: scale(1.3) rotate(180deg);width: 90px;border-top-left-radius: 40%;border-bottom-left-radius: 45%;}100%{transform: scale(1) rotate(360deg);}
}
@keyframes drop{0%{transform: scale(.7) translateY(-600%);opacity: 0;}50%{transform: scale(.4) translateY(-80%);opacity: 1;}100%{transform: scale(.3) translateY(0px);}
}

总结：

改代码主要使用了css3中的filter滤镜 filter - CSS（层叠样式表) filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

blur():

blur() 函数将高斯模糊应用于输入图像。radius 定义了高斯函数的标准偏差值，或者屏幕上有多少像素相互融合，因此，较大的值将产生更多的模糊。若没有设置值，默认为0。该参数可以指定为 CSS 长度，但不接受百分比值。例子:filter: blur(5px)

contrast()

contrast() 函数可调整输入图像的对比度。值是 0% 的话，图像会全黑。值是 100%，图像不变。值可以超过 100%，意味着会运用更低的对比。若没有设置值，默认是 1。例子：filter: contrast(200%)

使用这两个函数让整个大的div的显示边缘有了更为有流体的效果，在通过animation的动态效果，逐步放大，显示和隐藏，旋转，延迟动画的效果达到该动态效果。

css特效之水滴效果相关推荐

使用css实现水珠/水滴效果
我:ui,这里需要一个水珠效果图 ui:现在没空,你不能自己在网上找一个或者自己做一个吗? 我:啊这- 我:行吧,你空了给我做一下 ui:-哦可手写就手写,谁怕谁,直接开干. 这里我们在一个新建的h ...
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 ...
【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...
【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> & ...
CSS 中使用动画效果实现点赞特效
CSS 中使用动画效果实现点赞特效效果图当没有点赞的时候, 页面上只有的图标是黑色的点赞之后, 出现一个缓缓上升的红心赞, 之后页面上的赞变为取消, 图标变为红色缓缓上升的红心赞会左右摇摆 - ...
html css分页特效,CSS样式表实现效果很好的分页效果源代码
CSS样式表实现效果很好的分页效果,在学习编程过程中由于文章内容比较多或者列表内容比较多,我们都需要分页!那么你想不想要一种好的分页效果呢?这个是我认为比较容易使用,同时编程方面也挺容易实现的分页,就 ...
特效html布局,一些好玩的css特效
html5 css3有哪些新特效 html5: 用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素,比如 article.f ...
使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
JS动画 | 用TweenMax实现收集水滴效果
之前在CodePen上接触了TweenMax, 被它能做到的酷炫效果震撼了. (文末放了5个GSAP的效果GIF) 最近要做一个"收集水滴"的动效, 于是就试用了一下TweenMa ...

css特效之水滴效果

css特效之水滴效果

blur():

contrast()

css特效之水滴效果相关推荐

最新文章

热门文章