CSS3特效 - 会呼吸的button按钮

最新推荐文章于 2025-05-23 13:58:50 发布

原创最新推荐文章于 2025-05-23 13:58:50 发布 · 9.4k 阅读

4 ·

CC 4.0 BY-SA版权

本文为优快云博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

CSS 3 同时被 2 个专栏收录

60 篇文章

订阅专栏

HTML 5

33 篇文章

订阅专栏

本文介绍了一种使用CSS3实现的动态按钮效果，通过关键帧动画使按钮产生呼吸感，增强用户交互体验。代码示例详细展示了如何设置按钮样式及动画效果。

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

CSS3特效 - 会呼吸的button按钮

动画过度都很流畅。这里以gif为模拟效果。

1. 效果图

在这里插入图片描述

2. 代码如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS3特效 - 会呼吸的button按钮</title>
	<style type="text/css">	
		.search {
		    width: 185px;
		    height: 70px;
		    background: url(images/btn_08.jpg) no-repeat center;
		    border-radius: 8px;
		    -webkit-border-radius: 8px;
		    -o-border-radius: 8px;
		    -moz-border-radius: 8px;
		    float: left;
		    font-size: 30px;
		    text-align: center;
		    font-weight: bold;
		    border: none;
		    color: #fff;
		    cursor: pointer;
		    line-height: 70px;
		    font-family: 微软雅黑;
		}
		.btn {
		    width: 383px;
		    height: 70px;line-height: 0;
		    border: 2px solid #a2f3ff;
		    background: #f3682d;
		    margin: 22px 0 0 17px;
		    border-radius: 37px;
		    -webkit-border-radius: 37px;
		    -o-border-radius: 37px;
		    -moz-border-radius: 37px;
		    text-shadow: 3px 2px #d4481b;
		    -webkit-text-shadow: 3px 2px #d4481b;
		    -o-text-shadow: 3px 2px #d4481b;
		    -moz-text-shadow: 3px 2px #d4481b;
		    font-family: 微软雅黑;
		}
		#search{
		    animation: breathe 1.1s infinite;
		}
		@keyframes breathe{
		  0%{ transform: scale(.99); }
		  50%{ transform: scale(1.03); }
		  100%{ transform: scale(.99); }
		}
	</style>
</head>
<body>
	<input id="search" name="cx" type="button" value="立即搜索" class="btn search">
</body>
</html>