css 波纹扩散效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>Document</title>
</head>
<style type="text/css">
.dot {animation: sploosh 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.dot2 {animation: sploosh2 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.dot3 {animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.dot,.dot2,.dot3{height: 100px;width: 100px;font-size: 20px;color: #fff;line-height: 100px;text-align: center;border-radius: 100%;position: absolute;z-index: 10;animation-iteration-count:infinite;background: transparent;
}
@keyframes sploosh {0% {box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7);background: rgba(255, 220, 1, 0.7);}100% {box-shadow: 0 0 0 30px rgba(255, 220, 1, 0);background: rgba(255, 220, 1, 0);}
}
@keyframes sploosh2 {0% {box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7);background: rgba(255, 220, 1, 0.7);}100% {box-shadow: 0 0 0 20px rgba(255, 220, 1, 0);background: rgba(255, 220, 1, 0.3);}
}
@keyframes sploosh3 {0% {box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7);background: rgba(255, 220, 1, 0.7);}100% {box-shadow: 0 0 0 10px rgba(255, 220, 1, 0);background: rgba(255, 220, 1, 1);}
}
</style>
<body><div style="height:100px;width:100px;border-radius:100%;position: relative;margin:200px auto; "><div class="dot"><div class="dot2"><div class="dot3">每日签到</div></div></div></div>
</body>
</html>

css 波纹扩散效果相关推荐

CSS实战 - 波纹扩散效果
1.实现效果效果一:涟漪扩散效果效果二:波动扩散效果 2.实现原理在 div 里定义圆形,使用 css 的动画,让圆形的大小由小到大进行变化. ① 涟漪扩散: 定义了3个带边框的空圆,让这3个圆 ...
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; ...
android水平波浪扩散动画,Android实现水波纹扩散效果
本文实例为大家分享了Android实现水波纹扩散效果的具体代码,供大家参考,具体内容如下先上图 ?澹∶挥型计??跃湍昧诵"泊?媪恕?/p> 先看一下如何使用这个View. andro ...
Android点击水波纹扩散效果整理（附带一个自定义的水波纹效果控件）
很久很久没有写博客了,说来也有点惭愧.正好最近整理自己的项目工程目录,看到一些值得分享的控件,准备在之后的几篇博客中准备把它们陆续搬运上来. 这篇博客准备整理一下Android Material De ...
css 波纹扩散_css3实现支付宝波纹扩散的功能原理
今天讲一个比较简单的css3的特效吧. 之前在使用支付宝的时候,我偶然间发现支付宝有一个页面,有一个波纹扩散的特效,还挺有意思. 正巧这几天,我在开发小程序的时候,也遇到了这个需求,所以简单做了个de ...
android 点击扩散,Android水波纹扩散效果
先上图囧!没有图片所以就拿了小安代替了先看一下如何使用这个View .com.mybutton.view.RippleDiffuse android:layout_width="200d ...
css 波纹扩散_css水波纹动画
好久没有写 css 动画了,久到我都忘了了,想当初在大学的时候,写起 css3 的动画,那可是6得很. 今天要实现个水波纹动画,暂且记录一下思路吧刚开始拿到的时候还是有点傻眼,第一种方案,我的想法是 ...
android水波纹加光圈扩散效果,swift UIView优雅的添加点击事件 android Material Design 水波纹扩散效果...
效果图: image 使用方式 UIView,UIImageView,UIButton 一样 let mView = MView() //是否开启水波纹效果,默认开启 mView.rippleEnab ...

css 波纹扩散效果

css 波纹扩散效果

css 波纹扩散效果相关推荐

最新文章

热门文章