html实现一个一闪一闪的按钮，CSS实现一个一闪一闪的按钮，Css闪烁点标

news2024/12/24 9:35:39

效果

在这里插入图片描述

实现

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#app {
				margin: auto 38%;
				margin-top: 10%;
			}
			/** 关键*/
			.lay-btn-box {
				position: relative;
			}
			
			.lay-btn {
				background: #59b0fb;
				border-radius: 50%;
				display: inline-block;
				width: 22vw;
				height: 22vw;
				color: white;
				font-size: 5vw;
				line-height: 22vw;
				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: 8vw;
				--lay-spread-size: 0px;
				display: inline-block;
				width: 22vw;
				height: 22vw;
				border-radius: 50%;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			.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;
				}
			}
		</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>

		</div>

	</body>

</html>