CSS3特效 - 会呼吸的button按钮

最新推荐文章于 2024-04-17 01:37:33 发布
最新推荐文章于 2024-04-17 01:37:33 发布
阅读量9.1k 收藏 4
点赞数 1
分类专栏： CSS 3 HTML 5
本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！
本文链接：https://blog.csdn.net/qq_35393869/article/details/83112681
版权
CSS 3 同时被 2 个专栏收录
60 篇文章 3 订阅
订阅专栏
HTML 5
33 篇文章 3 订阅
订阅专栏

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按钮 ” 的全部内容。

草巾冒小子
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
呼吸灯按钮的实现
南风南
06-28 3635
前几天浏览网页是时候，发现一个特效，感觉很不错，博主仿照它的样子写了一下，下面直接见代码吧。在页面中添加一个提交按钮<body>
CSS3特效-移动端开关按钮样式
tian_tian_gong的博客
01-25 2478
在移动web中，经常会用到一个开关按钮。 其本质是checkbox。 效果图 代码 //css /*switch*/ .switch { position: relative; display: inline-block; width: 50px; height: 30px; } .switch input[type=checkbox] { display: none;...
css 按钮呼吸动画效果
阿之阿佐
08-10 1510
<src src="get-btn,png" alt="立即领取" class="animated infinite pulse slow" /> @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transfor.
CSS3常用动画效果合集（最全），2024年最新阿里P8面试官都说太详细了
最新发布
m0_63174811的博客
04-17 439
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
CSS实现呼吸效果
CH_Y的博客
10-31 3175
实现一个图片有规律的大小变化，呈现呼吸效果，怎么用CSS实现这个呼吸效果呢？以上就是我们用CSS的animation和transform来实现呼吸效果。
css3 呼吸动画按钮
weixin_30399055的博客
11-27 621
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body{ height: 100%; width: 100%; padding: 0;...
CSS——按钮呼吸效果
我是我
06-21 4360
1.效果演示 2.实现思路 定义一个按钮 呼吸，即宽高在一定时间内都有一定的缩放效果 我们可以使用transform中scale属性 3.代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp
css动画 呼吸的按钮
曲小强
06-28 862
animation: animat 1.1s infinite; @keyframes animat { 0%{ transform: scale(.8); } 50%{ transform: scale(1); } 100%{ transform: scale(.8); } }
高仿google now效果的呼吸按钮简单实现
Vi2Zhang的博客
12-19 4226
该按钮是我最早接触到为view添加动画效果的需求，刚刚参加安卓开发工作，要求设计一个好看的语音按钮效果，就有了这个成果，但是后来又改方案了，所以我也就没有对该按钮进行封装为一个自定义按钮，本文主要是展示一种合理组合利用animation来实现一些好看的动画效果，只是一种思路。      先上图：      实现该效果，重要的是我们要如何实现这种动态的呼吸效果，因为是一种非线性运动，直接实现起来有
CSS3特效-CSS3实现烟花特效
12-19
CSS3实现烟花特效-图片+css
css3特效-css实现烟花特效
12-19
css3+js实现烟花绽放的动画效果
纯代码播放按钮呼吸效果JS透明动态效果
04-12
纯手写代码播放按钮呼吸效果JS透明动态效果，用于做吸引点击播放效果。
css3 炫丽按钮例子
08-23
单纯css3做的各种炫丽按钮，特效按钮，会呼吸的按钮，颜色渐变， 直接通过css3绘制出特殊效果，使用css的动画技术实现的简单例子
36种漂亮的CSS3网页按钮Button样式
04-08
36种漂亮的CSS3网页按钮Button样式，不看不知道，一看吓一跳，让你以后不用再为按钮的样式担心！
CSS3 SVG Switch Button Checkbox 开关按钮.rar
07-10
**CSS3 SVG Switch Button Checkbox 开关按钮** 在Web开发中，设计吸引人的用户界面是至关重要的，CSS3和SVG（可缩放矢量图形）的结合为此提供了强大的工具。本资源提供了一种实现SVG开关按钮的方法，适用于移动...
H5 css3 box-shadow鼠标悬停按钮动画特效.zip
07-11
 简单的悬停效果基于 <code>box-shadow</code></h1>  <button class="fill">Fill In</button>  <button class="pulse">Pulse... 一款用box-shadow属性制作多种按钮悬停动画效果，css3鼠标悬停按钮动画特效下载。
上传按钮火箭上升CSS3特效
07-31
"上传按钮火箭上升CSS3特效"就是一种巧妙地利用JavaScript和CSS3技术来增强网页上传功能交互性的设计。这种特效使得上传按钮在用户点击后，呈现出火箭升空的动画效果，为原本枯燥的上传过程增添了趣味性和视觉吸引力...
关于CSS3呼吸效果的探究
Tycho‘s Blog
01-02 3581
一、效果预览 如图所示，鼠标移动上去，图片会向右上角抖动，鼠标离开，图片恢复原状。二、方案选择刚刚接触到这个效果的时候，我还以为是采用放大效果来实现的，即scale:1.2诸如此类的代码，结果不然。这个效果的实现，如果采用jquery的方案，直接写个动画即可。//先设定好position:relative; $('img:hover').animate({'left':'10px','bottom
实习---CSS-给按钮添加呼吸特效动画的方法
weixin_45038005的博客
07-27 1081
给按钮添加呼吸特效
CSS3------ 按钮闪光划过效果
08-27
你可以使用CSS3来实现按钮闪光划过效果。下面是一个简单的例子： HTML代码： ``` <button class="glow-button">按钮</button> ``` CSS代码： ```css .glow-button { position: relative; display: inline-block; padding: 10px 20px; font-size: 16px; border: none; background-color: #333; color: #fff; overflow: hidden; } .glow-button::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-color: rgba(255, 255, 255, 0.1); opacity: 0; transform-origin: center center; transform: scale(0); transition: transform 0.3s, opacity 0.3s; } .glow-button:hover::before { opacity: 1; transform: scale(1); } ``` 在这个例子中，我们使用了`::before`伪元素来创建一个覆盖整个按钮的方块。通过将`opacity`设置为0和`transform`设置为`scale(0)`，我们将其隐藏起来。当鼠标悬停在按钮上时，通过将`opacity`设置为1和`transform`设置为`scale(1)`，我们使方块逐渐显示出来，并放大至和按钮一样大小。 你可以根据需要修改按钮的样式和闪光划过效果的细节。希望对你有帮助！如果你还有其他问题，请随时向我提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值