- 1CentOS7虚拟机中使用kolla-ansible部署all-in-one模式openstack详细步骤_openstack all in one
- 21.12 实例：猜数字小游戏_verilog猜数字游戏
- 3深度学习如何入门？_深度学习 入门
- 4python calendar模块常用方法_python calendar用法
- 5LeetCode：419. 甲板上的战舰————中等_甲板上的战舰 js
- 6python中的sorted怎么用_python sorted方法和列表使用解析
- 7MySQL知识总结一（MySQL常见术语）_mysql 术语解释
- 8FPGA 20个例程篇：20.USB2.0/RS232/LAN控制并行DAC输出任意频率正弦波、梯形波、三角波、方波(一）_用verilog控制dac产生波形
- 9新版onenet平台安全鉴权的确定与使用_新版onenet没有鉴权_onenet新版本的设备的鉴权信息是什么
- 10ARP解析_arp报文
按钮点击涟漪效果_点击按钮样式 点击后有起伏感
赞
踩
.btn{
position: relative;
border: none;
background: linear-gradient(to right,#33cccc,#ff99cc);
width: 200px;
height: 60px;
font-size: 20px;
letter-spacing: 2px;
color: white;
border-radius: 30px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.btn span{
position: absolute;
width: 30px;
height: 30px;
background-color: white;
transform: translate(-50% , -50%);
border-radius: 50%;
animation: anima 1s ease 1;
pointer-events: none;
}
@keyframes anima {
from{
width: 0;
height: 0;
opacity: 0.8;
}
to{
width: 400px;
height: 400px;
opacity: 0;
}
}
.btn:active{
box-shadow: 0 0 10px rgba(0, 0, 0, 03);
transform: scale(0.9);
}
</style>
</head>
<body>
<button class="btn">我擦好牛逼</button>
<button class="btn">我擦好牛逼</button>
<button class="btn">我擦好牛逼</button>
<button class="btn">我擦好牛逼</button>
<script>
const btns = document.querySelectorAll('button');
btns.forEach(btn => {
btn.addEventListener('click',e=>{
let span = document.createElement('span');
span.style.left=e.offsetX+'px';
span.style.top=e.offsetY+'px';
btn.appendChild(span);
setTimeout(function(){
span.remove();
}, 1000);
})
});
//这里才是重点，利用js点击事件，在点击的位置生成一个span标签，css里有span的样式，从而达到涟漪的效果
</script>
</body>
