当看到你的时候，哇哦，这感觉来了！好神奇的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>Water</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}body{width: 100vw;height: 100vh;display: flex;justify-content: center;background-color: #00a8ff;}#water{margin-top: 200px;width: 300px;height: 300px;/* border: 1px solid #000; */border-radius: 47% 53% 56% 44% / 30% 28% 72% 70% ;/* 内层阴影  左上为正值，右下为负值*/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 -10px 15px rgba(255, 255, 255, 0.8);/*调用函数*/animation: action 3s linear infinite alternate;}#water::after{content: '';width: 20px;height: 20px;position: absolute;top: 240px;left: 48%;background-color: rgba(255, 255, 255, 0.8);border-radius: 43% 57% 53% 47% / 40% 42% 58% 60% ;}#water::before{content: '';width: 10px;height: 10px;position: absolute;top: 260px;left: 45%;background-color: rgba(255, 255, 255, 0.8);border-radius: 43% 57% 53% 47% / 40% 42% 58% 60% ;}/*实现动态的效果，就是改变其状态*/@keyframes action{25%{border-radius: 46% 54% 48% 52% / 41% 31% 69% 59% ;}50%{border-radius: 43% 57% 53% 47% / 40% 42% 58% 60%  ;}75%{border-radius: 43% 57% 56% 44% / 40% 47% 53% 60%  ;}100%{border-radius: 43% 57% 42% 58% / 40% 57% 43% 60%  ;}}</style>
</head>
<body><div id="water"></div>
</body>
</html>

神奇的css（动态水滴）相关推荐

开源超美css动态背景可直接引入html文件使用含注释、可更改
开源超美css动态背景可直接引入html文件使用含注释.可更改 1.背景样式本背景为动态蜘蛛网背景. 上图: 2.如何在html里面引用,作为html背景 1文件目录放在同一目录下 2 在in ...
神奇的CSS用法之border-radius
前言近期看到一个css实现水滴效果视频,本着知其然知其所以然的心理对其研究了一番,整理了一下保姆级的border-radius教学分享给大家了解作用如果工作碰到有不配合的ui不愿意给你特效的gi ...
移动端css动态字体大小fontSize rem
css动态字体大小fontSize rem 设置参考标准 /* 说明:此处将整个手机端设置成100%,作为参考 */ html{font-size: 100%; } 设置具体字体 /* 说明:font ...
8个神奇的网页动态流体布局及其做法揭秘
最近,有一种新的网页布局 --动态流体布局,很让我感到兴趣.因为用这个我就可以实现类似于WIN8触屏界面的网页设计啦!它巧妙地重排元素,并填补了网页的所有空间,而在每个浏览器上显示效果都十分出色,而且 ...
css 动态rem_css布局简史与第四代css布局技术
一转眼已经2019年,前端行业也风风雨雨的走过了10多年,网页布局也从最原始的文档变成成了当前精彩纷呈的交互.当我看到第四代css布局技术网格布局的时候,就像我看到无数女神一样的反应,美女我们好像在哪 ...
css 动态rem_【面试题】CSS知识点整理(附答案)
目录伪类和伪元素实现固定宽高比(width: height = 4: 3)的div,怎么设置 CSS选择器 CSS解析规则 flex: 1 完整写法 display: none和 visibili ...
神奇的机械动态图，看了一遍又一遍！最后一个真神奇～
全世界只有3.14 % 的人关注了爆炸吧知识神奇的机械科技动态图,看了一遍又一遍!最后一个真神奇- ▲金属切割的慢镜头,美! ▲齿轮变速原理演示 ▲塑料成型机器 ▲切丝的食品机器 ▲螺旋状的通心粉 ...
CSS 动态超链接样式 LVFHA 或 LVHFA
在HTML中,通过 a 元素来定义超链接,并通过 a 元素的 href 属性来定义链接的目标地址. <a href = "http://www.www.waibo">歪 ...
css动态阴影,css实现动态阴影、蚀刻文本、渐变文本效果
css实现动态阴影创建与类似的阴影box-shadow 而是基于元素本身的颜色. 代码实现: .dynamic-shadow-parent { position: relative; z-index ...

神奇的css（动态水滴）

效果（是动态的水滴，这里只是一帧图片）

代码

神奇的css（动态水滴）相关推荐

最新文章

热门文章