css —— 按钮水波纹扩散动画效果实现

一. 效果

二. 代码

<div class="feature"><div class="feature-box"><div class="pulse"></div><div class="pulse1"></div><div class="pulse2"></div></div></div>

<style>.feature {width: 100%;height: 800px;display: flex;align-items: center;justify-content: center;}.feature-box {width: 140px;height: 140px;margin-top: -30%;position: relative;z-index: 2;}.pulse {width: 140px;height: 140px;background: #4892FB;border-radius: 50%;}.pulse1, .pulse2 {position: absolute;width: 180px;height: 180px;left: 50%;top: -20px;margin-left: -90px;background: #4892FB;border-radius: 50%;opacity: 0;z-index: -1;box-shadow: 1px 1px 15px #3399ff;}.pulse1 {animation: warn1 1.5s linear;animation-iteration-count: infinite;}.pulse2 {animation: warn2 1.5s linear;animation-iteration-count: infinite;}@keyframes warn1 {0% {transform: scale(1);opacity: 0.01;}25% {transform: scale(1.2);opacity: 0.1;}50% {transform: scale(1.4);opacity: 0.07;}75% {transform: scale(1.6);opacity: 0.03;}100% {transform: scale(1.8);opacity: 0.01;}}@keyframes warn2 {0% {transform: scale(0.8);opacity: 0.01;}25% {transform: scale(0.8);opacity: 0.13;}50% {transform: scale(1);opacity: 0.1;}75% {transform: scale(1.2);opacity: 0.07;}100% {transform: scale(1.4);opacity: 0.01;}}</style>

css —— 按钮水波纹扩散动画效果实现相关推荐

Android Material Design 之 Activity 跳转水波纹扩散动画
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主威威喵原创,请多支持与指教. 本文首发于此博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
android 水波纹扩散动画,[Android]多层波纹扩散动画——自定义View绘制
之前整理过一些属性动画的基本操作,这一段时间的动画相关需求都安然度过了.直到这次-- 一.另一种动画需求多数交互中的动画都是让单个页面元素动起来,这种就很适合用属性动画实现.但是对于多个元素.非页 ...
Android点击水波纹扩散效果整理（附带一个自定义的水波纹效果控件）
很久很久没有写博客了,说来也有点惭愧.正好最近整理自己的项目工程目录,看到一些值得分享的控件,准备在之后的几篇博客中准备把它们陆续搬运上来. 这篇博客准备整理一下Android Material De ...
css 按钮扩散效果,专治按钮效果不明显（扩散动画效果）
效果需求背景由于最近自家小程序用户活跃用户下滑,老板看看自家小程序,发现分享按钮不够明显,于是乎有了下面这段对话. 老板:小明,你过来下,看看这个分享按钮不明显小明:好的,给它点颜色瞧瞧小明 ...
android水平波浪扩散动画,Android实现水波纹扩散效果
本文实例为大家分享了Android实现水波纹扩散效果的具体代码,供大家参考,具体内容如下先上图 ?澹∶挥型计??跃湍昧诵"泊?媪恕?/p> 先看一下如何使用这个View. andro ...
css 波纹扩散_html5 +css3 点击后水波纹扩散效果兼容移动端
html5+ js +css3 点击后水波纹扩散效果兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
html5 水波式按钮_css3+jQuery实现按钮水波纹效果
水波纹按钮 /*自定义按钮样式*/ .btns{ height: 30px; line-height: 30px; text-align: center; width: 200px; color: # ...
Android百度地图水波纹动画,高德地图实现水波纹扩散
功能修改,要求在地图上有个类似雷达的水波纹扩散的动画,通过大半天时间的研究.查找,终于完成了这项任务,话不多说,下面直接贴出代码,供有需要的兄弟参考, 1.首先在地图上画个圆如下图 2.新建个JS / ...
css波纹波动效果,CSS 冲击波(水波纹)效果
实现冲击波--数学知识很重要 *{ margin:0; padding:0; box-sizing:border-box; } html,body{ font-family:"微软雅黑&qu ...

css —— 按钮水波纹扩散动画效果实现

css —— 按钮水波纹扩散动画效果实现相关推荐

最新文章

热门文章