css3水波纹渐变扩散

1. n
纯css，话不多说直接贴代码
1hhtml

<div class="address"><div class="waterDrop"><div class="waterDrop_out"><div class="waterDrop_middle"><div class="waterDrop_inner"><span class="here_text">我们在这里</span></div></div></div></div></div>

2.css

.waterDrop {position: absolute;left: 50%;top: 70%;font-size: 16px;
}.waterDrop_out {position: absolute;top: calc(50% - 13em);left: calc(50% - 13em);width: 26em;height: 26em;border-radius: 50%;background-color: rgba(109, 82, 196, 0.1);animation: waterDrop_out 3s infinite;-webkit-animation: waterDrop_out 3s infinite;
}.waterDrop_middle {position: absolute;top: calc(50% - 6em);left: calc(50% - 6em);width: 12em;height: 12em;border-radius: 50%;background-color: rgba(109, 82, 196, 0.3);animation: waterDrop_middle 3s infinite;-webkit-animation: waterDrop_middle 3s infinite;
}.waterDrop_inner {position: absolute;top: calc(50% - 3em);left: calc(50% - 3em);width: 6em;height: 6em;border-radius: 50%;background-color: rgba(109, 82, 196, 0.75);animation: waterDrop_inner 3s infinite;-webkit-animation: waterDrop_inner 3s infinite;text-align: center;
}
.here_text{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}@keyframes waterDrop_out {from {background-color: rgba(109, 82, 196, 0.1);top: calc(50% - 13em);left: calc(50% - 13em);width: 26em;height: 26em;}to {background-color: rgba(109, 82, 196, 0.2);top: calc(50% - 14em);left: calc(50% - 14em);width: 28em;height: 28em;}
}@-webkit-keyframes waterDrop_out {from {background-color: rgba(109, 82, 196, 0.2);top: calc(50% - 13em);left: calc(50% - 13em);width: 26em;height: 26em;}to {background-color: rgba(109, 82, 196, 0.2);top: calc(50% - 14em);left: calc(50% - 14em);width: 28em;height: 28em;}
}@keyframes waterDrop_middle {from {background-color: rgba(109, 82, 196, 0.3);top: calc(50% - 6em);left: calc(50% - 6em);width: 12em;height: 12em;}to {background-color: rgba(109, 82, 196, 0.3);width: 14em;height: 14em;top: calc(50% - 7em);left: calc(50% - 7em);}
}@-webkit-keyframes waterDrop_middle {from {background-color: rgba(109, 82, 196, 0.3);top: calc(50% - 6em);left: calc(50% - 6em);width: 12em;height: 12em;}to {background-color: rgba(109, 82, 196, 0.3);width: 14em;height: 14em;top: calc(50% - 7em);left: calc(50% - 7em);}
}

欢迎喜欢的朋友学习交流！！！

css3水波纹渐变扩散相关推荐

android自定义控件几种,Android 自定义View一个控件搞定多种水波纹涟漪扩散效果 - CSDN博客...
效果图实现思路这个效果实现起来并不难,重要的是思路此View满足了多种水波纹涟漪扩散效果,这要求它能满足很多的变化根据上面的样式,可以看出此View需要满足以下变化圆圈从中心可循环向外扩散 ...
android水波纹加光圈扩散效果,swift UIView优雅的添加点击事件 android Material Design 水波纹扩散效果...
效果图: image 使用方式 UIView,UIImageView,UIButton 一样 let mView = MView() //是否开启水波纹效果,默认开启 mView.rippleEnab ...
css 波纹扩散_html5 +css3 点击后水波纹扩散效果兼容移动端
html5+ js +css3 点击后水波纹扩散效果兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
html移动端语音波纹,html5 +css3 点击后水波纹扩散效果兼容移动端
html5+ js +css3 点击后水波纹扩散效果兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
css 波纹扩散_css水波纹动画
好久没有写 css 动画了,久到我都忘了了,想当初在大学的时候,写起 css3 的动画,那可是6得很. 今天要实现个水波纹动画,暂且记录一下思路吧刚开始拿到的时候还是有点傻眼,第一种方案,我的想法是 ...
android水平波浪扩散动画,Android实现水波纹扩散效果
本文实例为大家分享了Android实现水波纹扩散效果的具体代码,供大家参考,具体内容如下先上图 ?澹∶挥型计??跃湍昧诵"泊?媪恕?/p> 先看一下如何使用这个View. andro ...
Android百度地图水波纹动画,高德地图实现水波纹扩散
功能修改,要求在地图上有个类似雷达的水波纹扩散的动画,通过大半天时间的研究.查找,终于完成了这项任务,话不多说,下面直接贴出代码,供有需要的兄弟参考, 1.首先在地图上画个圆如下图 2.新建个JS / ...
Android Canvas进阶之自定义View实现Splash的旋转、扩散聚合、水波纹特效
先上效果图动画可以分割为3阶段,第一阶段是6个小圆的旋转,第二阶段是6个小圆的扩散和收缩,第三部分是水波纹特效,动画的实现也是按照这三个阶段进行实现的. 1.初始化自定义FlashView继承Vi ...
Android点击水波纹扩散效果整理（附带一个自定义的水波纹效果控件）
很久很久没有写博客了,说来也有点惭愧.正好最近整理自己的项目工程目录,看到一些值得分享的控件,准备在之后的几篇博客中准备把它们陆续搬运上来. 这篇博客准备整理一下Android Material De ...

css3水波纹渐变扩散

css3水波纹渐变扩散相关推荐

最新文章

热门文章