<button class="heartbeat-button">点击我</button>
.heartbeat-button {
display: inline-block;
position: relative;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #f44336;
border: none;
border-radius: 5px;
cursor: pointer;
animation: heartbeat 1.5s infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.heartbeat-button:before,
.heartbeat-button:after {
content: '';
display: block;
position: absolute;
top: -10px;
left: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
border-radius: 50%;
opacity: 0;
background-color: rgba(255, 255, 255, 0.3);
z-index: -1;
animation: heartbeat-before 1.5s infinite;
}
@keyframes heartbeat-before {
0% {
transform: scale(0);
opacity: 0.5;
}
50% {
opacity: 0;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
.heartbeat-button:hover:before,
.heartbeat-button:hover:after {
animation-play-state: paused;
}
一个心脏跳动效果的按钮
最新推荐文章于 2023-12-05 12:19:24 发布