HTML+CSS+JS炫酷按钮特效

最新推荐文章于 2024-02-10 15:17:04 发布

翻译最新推荐文章于 2024-02-10 15:17:04 发布 · 745 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.bilibili.com/video/BV1gY411s7bu?spm_id_from=333.337.search-card.all.click

文章标签：

#前端 #javascript #html #css

这个博客分享了一个使用HTML、CSS和JavaScript实现的动态按钮案例，按钮设计灵感来源于萤火虫，当鼠标悬停在按钮上时，会呈现出萤火虫飞舞的光影效果。通过CSS渐变、阴影和动画属性，以及JavaScript动态设置元素位置和动画时长，营造出生动的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，效果图
萤火虫按钮
2，源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<mate name="viewport" content="width=device-width,initial-scale=1.0">
		<mate http-equiv="X-UA-Compatible" content="ie=edge">
		<script src="js/jquery-3.4.1.min.js"></script>
		<title>萤火虫动态按钮</title>
		<style type="text/css">
			@font-face {
				font-family:'firefly';
				src: url(ZCOOLKuaile-Regular.ttf);
			}
			* {
				padding: 0;
				margin: 0;
			}
			body {
				height: 100vh;
				background: url(img/1.jpg) no-repeat;
				background-size: cover;
			}
			ul {
				list-style: none;
			}
			button{
				outline: none;
				border: none;
			}
			.firefly{
				width: 180px;
				height: 60px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				background: linear-gradient(to right,#6eb46e 10%,#55b455);
				border-radius: 40px;
				opacity: .88;
				cursor: pointer;
				transition: 1s;
			}
			.firefly:hover{
				box-shadow: 0 0 10px #b4ffb4;
			}
			.firefly p {
				line-height: 60px;
				font-size: 22px;
				color: #f5dd8f;
				font-size: firefly;
				opacity: .88;
			}
			.lightning{
				width:95%;
				height:80%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				border-radius: 40px;
				transition: .8s;
				overflow: hidden;
			}
			.firefly:hover .lightning{
				box-shadow: 0 0 4px #B4FFB4 inset;
			}
			.lightning ul {
				opacity: 0;
				transition: .8s;
			}
			.firefly:hover ul {
				opacity: .8;
			}
			.lightning ul li{
				width: 5px;
				height: 5px;
				background-color: #91fa91;
				position: absolute;
				bottom: 10%;
				border-radius: 50%;
				opacity: .6;
				animation: fireflymove infinite linear;
			}
			@keyframes fireflymove{
				100%{
					bottom: 100%;
				}
			}
		</style>
	</head>
	<body>
		<button class="firefly">
			<p>萤火虫</p>
			<div class="lightning">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</button>
	</body>
    <script>
		var lgh = $('.lightning li').length;
		$('.lightning li').each(function(i){
			$(this).css({
				left:i*(100/lgh) + '%',
				bottom: randomNum(-20,10)+'%',
				animationDuration: randomNum(1,5)+'s'
			});
		});
		function randomNum(max,min){
			var num = Math.floor(Math.random()*(max-min+1)+min);
			return num;
		}
	</script>
</html>

记录每一个前端小案例！！！！