介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比;
,,,& lt; title> Document
,,,& lt; style>
,,,,,,,.btn {,
,,,,,,,,,,,显示:,块,,
,,,,,,,,,,,宽度:,300 px,,
,,,,,,,,,,,身高:,100 px;
,,,,,,,,,,,保证金:,50 px;,
,,,,,,,,,,,:轮廓,0;,
,,,,,,,,,,,溢出:,隐藏,,,
,,,,,,,,,,,位置:,相对的,,
,,,,,,,,,,,的转变:,。3,,
,,,,,,,,,,,光标:,指针,,
,,,,,,,,,,,用户选择:,没有,,,
,,,,,,,,,,,text-align:,中心,,
,,,,,,,,,,,行高:,100 px,,
,,,,,,,,,,,字体大小:,50 px;,
,,,,,,,,,,,背景:,番茄,,
,,,,,,,,,,,颜色:,# fff;,,
,,,,,,,,,,,这个特性:,10 px;
,,,,,,,}
,,,,,,,.btn>跨度{,
,,,,,,,,,,,位置:,绝对的,,
,,,,,,,,,,,左:,0;,
,,,,,,,,,,,:,0;
,,,,,,,,,,,宽度:,100%,,
,,,,,,,,,,,身高:,100%;}
,,,,,,,.btn>跨度:{后,
,,,,,,,,,,,内容:,& # 39;& # 39;,,
,,,,,,,,,,,位置:,绝对的,,
,,,,,,,,,,,背景:,透明的,,
,,,,,,,,,,,这个特性:50%,,
,,,,,,,,,,,宽度:,100%,,
,,,,,,,,,,,padding-top:, 100%,,
,,,,,,,,,,,margin-left:, -50%,,
,,,,,,,,,,,margin-top:, -50%,,
,,,,,,,,,,,左:,var (x, -100%),,
,,,,,,,,,,,:,var (y, -100%),,
,,,,,,,}
,,,,,,,{,.btn:活跃
,,,,,,,,,,,背景:,橙红色;
,,,,,,,}
,,,,,,,.btn>输入(type=复选框){
,,,,,,,,,,,显示:没有
,,,,,,,}
,,,,,,,.btn>后输入(type=复选框)+跨度:{
,,,,,,,,,,,动画:,ripple-in 1 s;
,,,,,,,}
,,,,,,,.btn>输入(type=复选框):检查+跨度:{后
,,,,,,,,,,,动画:,ripple-out 1 s;
,,,,,,,}
,,,,,,,@keyframes 影响{
,,,,,,,,,,,得到{
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要为大家展示了CSS + JS怎么实现水滴涟漪动画按钮效果,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“CSS + JS怎么实现水滴涟漪动画按钮效果”这篇文章吧。
代码如下所示:
