css 实现水滴动画

这个水滴动画在视觉效果上看着是动态图，有需要的小伙伴直接可以参考代码

<!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>水滴效果</title></head><body><div class="box"></div></body>
</html>
<style>body {width: 100vw;height: 100vh;display: flex;background-color: #00a8ff;}.box {width: 150px;height: 150px;border: 1px solid #000;margin: 80px auto;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:before {content: "";width: 10px;height: 10px;position: absolute;top: 94px;left: 50%;background-color: rgba(255, 255, 255, 0.8);border-radius: 46% 54% 36% 64% / 46% 43% 57% 54%;}@keyframes a {25% {border-radius: 58% 42% 59% 41% / 52% 46% 54% 48%;}50% {border-radius: 46% 54% 40% 60% / 52% 33% 67% 48%;}75% {border-radius: 65% 35% 71% 29% / 31% 60% 40% 69%;}100% {border-radius: 60% 40% 43% 57% / 45% 51% 49% 55%;}}.box {animation: a 4s linear infinite alternate;}
</style>

css 实现水滴动画相关推荐

android+水滴粘性动画,纯css实现Material Design中的水滴动画按钮
前言大家平时应该经常见到这种特效,很炫酷不是吗这是谷歌Material Design中最常见的特效了,市面上也有很多现成的js库,用来模拟这一特效.但是往往要引入一大堆js和css,其实在已有的项 ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
怎么用java做水滴动画_‘纯css实现Material Design中的水滴动画按钮’的js体验优化...
前言在上一篇,我们已经实现了用纯css实现水滴扩散动画,但是有一些瑕疵,文章结尾处也提到过,一是页面加载进来就会看到按钮上的水滴动画运动一次,二是点击的时候不能根据鼠标的位置来扩散,今天我们来解决这 ...
php实现动态按钮效果,纯css实现MaterialDesign水滴动画按钮效果的js实现方法
本篇文章给大家带来的内容是关于纯css实现Material Design水滴动画按钮效果的js实现方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在上一篇,我们已经实现了用纯cs ...
css玻璃雨滴效果,CSS实现雨滴动画效果的实例代码
玻璃窗今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
html实现的动画效果代码,CSS实现雨滴动画效果的实例代码
玻璃窗今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
css 加载动画如何生效,CSS 加载动画
CSS加载动画实现加载动画效果,需要的两个关键步骤: 1.做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px s ...
html 动画div右侧消失,使用animate.css时，动画一开始不隐藏,如何解决呢？
animate.css 的入场动画,一开始(初始态)怎么隐藏呢?(否则会闪一下.) 动画结束后要保持显示. 补充.. 使用了官网推荐的jquery 扩展代码,运动完后自动删除 class. 这是一个坑 ...
如何使用纯 CSS 创建翻牌动画
下面的示例向您展示了如何使用纯 CSS 创建翻牌动画. 作者:坚果公众号:"大前端之旅" 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GV ...

css 实现水滴动画

css 实现水滴动画相关推荐

最新文章

热门文章