用CSS3动画效果写出一个立体小水滴

小水滴非常简单，其实可以直接用一个div+before after就可以写出来，个人是用三个div写的，现在给大家看一下吧！！！

1.先建立一个div div里面包括两个div作为2个小泡泡

<body><div class="water"><div class="water1"></div><div class="warer2"></div></div>
</body>

2.给body div加上css样式不懂得可以看看注释

<style>* {margin: 0;padding: 0;box-sizing: border-box;}body {width: 100%;height: 100%;display: flex;background-color: #00a8ff;}.water {width: 200px;height: 200px;margin: 200px auto;position: relative;border-radius: 47% 53% 57% 43% / 63% 34% 66% 37%;/* 水平方向内阴影，水平方向往右边出现十个像素 *//* 垂直方向 *//* 半径值 */box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5),20px 20px 30px rgba(0, 0, 0, 0.4),10px 10px 20px rgba(0, 0, 0, 0.03),/* 右下方向是负，左上是正 */inset -20px -10px 20px rgba(255, 255, 255, 0.6);/* 动画名称 动画时长 匀速播放 播放时长 偶次顺方向播放，奇次逆方向播放。 */animation: wat 3s linear infinite alternate;}.water1{width: 8px;height: 8px;border: 1px solid;position: absolute;top: 30px;left: 40%;background-color: rgba(255,255,255,0.6);border-radius: 47% 53% 35% 65% / 63% 34% 66% 37% ;}.warer2{width: 5px;height: 5px;border: 1px solid;position: absolute;top: 40px;left: 30%;background-color: rgba(255,255,255,0.6);border-radius: 47% 53% 35% 65% / 63% 34% 66% 37% ;}

给大家分享一个网址想要什么样形状的圆可以直接获取 copy就可以了

https://9elements.github.io/fancy-border-radius

3.样式写好之后就直接加动画就可以了

@keyframes wat{25%{border-radius: 16% 84% 43% 57% / 44% 42% 58% 56%    ;}50%{border-radius: 52% 48% 46% 54% / 63% 34% 66% 37%   ;}75%{border-radius: 30% 70% 46% 54% / 74% 34% 66% 26%   ;}100%{border-radius: 30% 70% 33% 67% / 74% 19% 81% 26%   ;}}

这样就直接完成了

用CSS3动画效果写出一个立体小水滴相关推荐

完整的写出一个微信小程序的电子商城的用户人脉关系网的所有功能，所包含的前台、中台、后台所有的用户功能与管理员功能以及维护人员及客服的所有功能需求。
前台用户的功能需求: 购物类: 商品浏览:分别提供分类.搜索.推荐等方式,支持关键词搜索,多条件筛选: 商品详情:查看商品详情.评价内容.商品图片.商品属性.库存.成本.售价以及支持下单价格即时计算. ...
[css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
css 右上角翻开动画_27个精致的CSS3动画效果源代码下载
CSS主要用于控制网页的外观,CSS代码可以随意变化网页的布局和网页的内容样式.当CSS3出现以后,更是可以让网页增添了不少动画元素,随着IE6,7的淘汰,手机端的崛起更是让它成熟了许多.CSS3动画 ...
怎样写出一个较好的高速排序程序
写出一个较好的高速排序程序高速排序是经常使用的排序算法之中的一个,但要想写出一个又快又准的使用程序,就不是那么简单了须要注意的事项首先要写正确.通常使用递归实现.其递归相当于二叉树展开,因此假设 ...
如何写出一个较好的快速排序程序
写出一个较好的快速排序程序快速排序是常用的排序算法之一,但要想写出一个又快又准的使用程序,就不是那么简单了需要注意的事项首先要写正确.通常使用递归实现.其递归相当于二叉树展开,因此如果要用迭代实 ...
Html+css3动画效果
Html+css3动画效果开发工具与关键技术:DW 作者:彭春怡撰写时间:2019/1/16 1.下面是通过html+css3完成的一个动画效果,"跳跳球".实现的代码如图所示 ...
写出一个美观的表单页
如何写出一个美观的表单页前言最近做项目总能遇到各种各样,千奇百怪的需求.用bootstrap等ui框架不能满足客户需求.只能开动自己脑筋,自己写一些样式. 如何调整input样式(包括placeh ...
CSS3动画效果大全
CSS3动画效果大全 /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-an ...
解决css3动画效果在360兼容模式跟猎豹浏览器下不兼容
360跟猎豹采用的都是谷歌(WebKit内核)跟IE(Trident内核)的双内核,360浏览器分为极速模式(WebKit内核)和兼容模式(Trident内核),这就导致兼容模式下不支持css3动画效 ...

用CSS3动画效果写出一个立体小水滴

用CSS3动画效果写出一个立体小水滴相关推荐

最新文章

热门文章