效果
动态
静态
全部例子
实现
底部多加了几个过渡按钮
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#app {
/*margin: 2% auto;
text-align: center;*/
}
.lay-btn-box {
position: relative;
display: inline-block;
margin-top: 30px;
/** 实际使用删掉，下面两行*/
float: left;
margin-left: 10px;
}
.lay-btn {
background: #59b0fb;
border-radius: 50%;
display: inline-block;
width: 100px;
height: 100px;
color: white;
font-size: 20px;
line-height: 100px;
text-align: center;
box-shadow: #0000007a 0px 0px 10px 0;
cursor: pointer;
position: relative;
}
.lay-out-ripples {
opacity: 1;
pointer-events: none;
border-radius: 2px;
--lay-ripple-color: #59b0fb;
--lay-spread-width: 25px;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
}
.lay-out-ripples-static {
pointer-events: none;
border-radius: 2px;
box-shadow: 0 0 0 15px #59b0fb;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
opacity: 0.1;
}
.lay-animate-always-out {
animation: lay-ripple-effect 2s infinite;
}
@keyframes lay-ripple-effect {
0% {
box-shadow: 0 0 0 0 var(--lay-ripple-color);
opacity: .4;
}
100% {
box-shadow: 0 0 0 var(--lay-spread-width) var(--lay-ripple-color);
opacity: 0;
}
}
/** 过渡动画*/
.lay-btn-anim {
box-shadow: none;
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
.lay-btn-anim-1:hover {
box-shadow: #0000007a 0px 0px 10px 0;
}
.lay-btn-anim-2:hover {
box-shadow: inset 0 0 20px 0 #cee8ff;
}
.lay-btn-anim-3:hover {
box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.2) inset;
}
.lay-btn-anim-4:hover {
box-shadow: 0 0 0 10px #59b0fb inset, 0 0 0 60px rgba(0, 0, 0, 0.5) inset;
}
.lay-btn-anim-5:hover {
box-shadow: 80px 0 0 0 rgba(0, 0, 0, 0.25) inset, -80px 0 0 0 rgba(0, 0, 0, 0.25) inset;
}
.lay-btn-anim-6:hover {
box-shadow: 0 80px 0 0 rgba(0, 0, 0, 0.25) inset, 0 -80px 0 0 rgba(0, 0, 0, 0.25) inset;
}
.lay-btn-anim-7:hover {
box-shadow: 0 -120px 0 0 rgba(0, 0, 0, 0.5) inset;
}
.lay-btn-anim-8:hover {
box-shadow: 120px 0 0 0 rgba(0, 0, 0, 0.5) inset;
}
</style>
</head>
<body>
<div id="app">
<!-- 动态-->
<div class="lay-btn-box">
<div class="lay-out-ripples lay-animate-always-out"></div>
<div class="lay-btn">打卡</div>
</div>
<br />
<!-- 静态-->
<div class="lay-btn-box">
<div class="lay-out-ripples-static"></div>
<div class="lay-btn">打卡</div>
</div>
<br />
<!-- 外阴影-->
<div class="lay-btn-box">
<div class="lay-btn" style="box-shadow: #0000007a 0px 0px 10px 0;">打卡</div>
</div>
<br />
<!-- 内阴影1-->
<div class="lay-btn-box">
<div class="lay-btn" style="box-shadow: inset 0 0 20px 0 #9fd2ff;background: none;color: #59b0fb;">打卡</div>
</div>
<br />
<!-- 内阴影2-->
<div class="lay-btn-box">
<div class="lay-btn" style="box-shadow: inset 0 0 20px 0 #cee8ff;">打卡</div>
</div>
<br />
<!-- 动画-->
<div class="lay-btn-box">
<div class="lay-btn lay-btn-anim lay-btn-anim-1">打卡</div>
</div>
<br />
<div class="lay-btn-box">
<div class="lay-btn lay-btn-anim lay-btn-anim-2">打卡</div>
</div>
<br />
<div class="lay-btn-box">
<div class="lay-btn lay-btn-anim lay-btn-anim-3">打卡</div>
</div>
<br />
<div class="lay-btn-box">
<div class="lay-btn lay-btn-anim lay-btn-anim-4">打卡</div>
</div>
<br />
<div class="lay-btn-box">
<div class="lay-btn lay-btn-anim lay-btn-anim-5">打卡</div>
</div>
<br />
<div class="lay-btn-box">
<div class="lay-btn lay-btn-anim lay-btn-anim-6">打卡</div>
</div>
<br />
<div class="lay-btn-box">
<div class="lay-btn lay-btn-anim lay-btn-anim-7">打卡</div>
</div>
<br />
<div class="lay-btn-box">
<div class="lay-btn lay-btn-anim lay-btn-anim-8">打卡</div>
</div>
<style>
.tu_box {
background: #5e7ea2;
width: 200px;
height: 200px;
text-align: center;
border-radius: 5px;
display: inline-block;
position: relative;
}
.tu_btn {
width: 100px;
height: 100px;
border: 0;
font-size: 18px;
color: #fff;
cursor: pointer;
border-radius: 50%;
margin: 10px auto;
background: #5e7ea2;
transition: box-shadow 0.3s ease-in-out;
font-family: "Lucida Fax", Courier, monospace;
margin-top: 45px;
}
.btn-protrusion {
box-shadow: inset 0 0 0 #4c6683, inset 0 0 0 #7096c1, 6px 8px 17px #4c6683, -5px -5px 25px #7096c1;
}
.btn-protrusion:hover {
box-shadow: inset 2px 6px 10px #4c6683, inset -5px -5px 14px #7096c1, 6px 8px 17px #4c6683, -5px -5px 25px #7096c1;
}
</style>
<div class="tu_box">
<button class="tu_btn btn-protrusion ">打卡</button>
</div>
<style>
.anim-btn {
color: #fff;
background: #59b0fb;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
padding: 15px 20px;
text-align: center;
display: inline-block;
position: relative;
}
.anim-btn span {
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
animation: wave 1s linear infinite;
}
@keyframes wave {
0% {
width: 0;
height: 0;
opacity: .5;
}
100% {
width: 500px;
height: 500px;
opacity: 0;
}
}
</style>
<div class="anim-btn">点击位置涟漪</div>
<script>
const button = document.querySelector('.anim-btn')
button.onclick = (e) => {
const x = (e.pageX || e.clientX) - e.target.offsetLeft
const y = (e.pageY || e.clientY) - e.target.offsetTop
const mask = document.createElement('span')
mask.style.cssText = 'left: ' + x + 'px; top: ' + y + 'px';
button.append(mask)
setTimeout(() => mask.remove(), 1000)
}
</script>
</div>
</body>
</html>