編碼的世界 / 優質文選 / 生涯

CSS3特效 - 會呼吸的button按鈕

2022年6月28日
-   

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>

以上就是關於“ CSS3特效 - 會呼吸的button按鈕 ” 的全部內容。

熱門文章