html实现一个一闪一闪的按钮，CSS实现一个一闪一闪的按钮，Css闪烁点标，css设置按钮层次感，css按钮美化，CSS按钮动画过渡，CSS按钮添加阴影

news2024/11/19 6:30:06

效果

动态
在这里插入图片描述
静态

实现

底部多加了几个过渡按钮

<!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;
			}
			
			.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>
		</div>

	</body>

</html>