关于CSS3呼吸效果的探究

最新推荐文章于 2024-04-24 14:34:29 发布
最新推荐文章于 2024-04-24 14:34:29 发布
阅读量3.5k 收藏
点赞数 1
分类专栏： css 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20264891/article/details/78949964
版权

一、效果预览

这里写图片描述
如图所示，鼠标移动上去，图片会向右上角抖动，鼠标离开，图片恢复原状。

二、方案选择

刚刚接触到这个效果的时候，我还以为是采用放大效果来实现的，即scale:1.2诸如此类的代码，结果不然。

这个效果的实现，如果采用jquery的方案，直接写个动画即可。

//先设定好position:relative;
$('img:hover').animate({
  'left':'10px','bottom':'10px'});

假如追根溯源，还是使用的CSS3的动画。
首先自定义一个动画：


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Tycho丶
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
CSS3特效 - 会呼吸的button按钮

				
			

			

				

					草巾冒小子的博客
				

				

					10-17
					
					9152
					
				

			

		

		

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

2.  代码如下
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS3特效 - 会呼吸的button按钮</title>
	<style type="text/

			
		

	



                

              
                



	

		

			

				
					
css 按钮呼吸动画效果

				
			

			

				

					阿之阿佐
				

				

					08-10
					
					1524
					
				

			

		

		

			
				
<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.

			
		

	



                


  
              

                


	

		

			

				
					
css动画实现呼吸灯效果

					
最新发布

				
			

			

				

					qq_39933787的博客
				

				

					04-24
					
					350
					
				

			

		

		

			
				
【代码】css动画实现呼吸灯效果。

			
		

	





	

		

			

				
					
CSS实现呼吸效果

				
			

			

				

					CH_Y的博客
				

				

					10-31
					
					3214
					
				

			

		

		

			
				
实现一个图片有规律的大小变化，呈现呼吸效果，怎么用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
					
					4411
					
				

			

		

		

			
				
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

			
		

	





	

		

			

				
					
CSS3实现3D翻书效果

				
			

			

				

					01-21
				

			

		

		

			
				
但总感觉动画效果不好，当然还有其他解决办法，但突然想到，CSS3为我们提供了animation，我们为什么不去使用使用呢，只要为加上animation动画就可以直接避免这个问题，animation动画默认是每次都执行完动画，所以，...

			
		

	





	

		

			

				
					
css3实现灯光高亮时钟效果

				
			

			

				

					04-06
				

			

		

		

			
				
在CSS3的世界里，我们可以利用其强大的功能来创建各种炫酷的视觉效果，其中之一就是“灯光高亮时钟效果”。这个特效充分利用了CSS3的新特性，如边框半径、渐变、动画以及变换等，使得一个静态的时钟变得生动起来，...

			
		

	





	

		

			

				
					
css3动画效果抖动解决方法

				
			

			

				

					09-22
				

			

		

		

			
				
主要介绍了css3动画效果抖动解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
各种鼠标悬停css3动画效果

				
			

			

				

					06-12
				

			

		

		

			
				
这几天突然在网上看到好多不错的鼠标悬停后css3动画效果   总共有31种不同的动画效果，包括放大、缩小、阴影、各个方向旋转、翻转、等等   使用方法：   1、取出你需要的效果对应的id号   2、将页面自带的style样式...

			
		

	





	

		

			

				
					
纯代码播放按钮呼吸效果JS透明动态效果

				
			

			

				

					04-12
				

			

		

		

			
				
纯手写代码播放按钮呼吸效果JS透明动态效果，用于做吸引点击播放效果。

			
		

	





	

		

			

				
					
css3 炫丽按钮例子

				
			

			

				

					08-23
				

			

		

		

			
				
单纯css3做的各种炫丽按钮，特效按钮，会呼吸的按钮，颜色渐变，
直接通过css3绘制出特殊效果，使用css的动画技术实现的简单例子

			
		

	





	

		

			

				
					
36种漂亮的CSS3网页按钮Button样式

				
			

			

				

					04-08
				

			

		

		

			
				
36种漂亮的CSS3网页按钮Button样式，不看不知道，一看吓一跳，让你以后不用再为按钮的样式担心！

			
		

	





	

		

			

				
					
css3鼠标悬停图片抖动效果

				
			

			

				

					06-12
				

			

		

		

			
				
 一款纯css3实现的图片抖动效果   附件提供了多种图片抖动样式   喜欢的懒人可以自己试着下载使用，或者学习   使用方法：   1、将css样式引入到你的网页中   2、将body中的代码部分拷贝到你需要的地方即可   (图片...

			
		

	





	

		

			

				
					
SVG animate实现呼吸闪烁效果

					
热门推荐

				
			

			

				

					成长之路
				

				

					05-23
					
					1万+
					
				

			

		

		

			
				
SVG animate实现呼吸闪烁效果

			
		

	





	

		

			

				
					
实习---CSS-给按钮添加呼吸特效动画的方法

				
			

			

				

					weixin_45038005的博客
				

				

					07-27
					
					1087
					
				

			

		

		

			
				
给按钮添加呼吸特效

			
		

	





	

		

			

				
					
css3-呼吸灯

				
			

			

				

					weixin_47775987的博客
				

				

					02-14
					
					291
					
				

			

		

		

			
				
.box{

      width: 200px;

      height: 200px;

      background-color: rgb(255, 129, 228);

      border-radius: 50%;

      opacity: 0.1;

      overflow: hidden;

      margin: 25% auto;

      -webkit-a...

			
		

	





	

		

			

				
					
css3实现科技感的呼吸灯效果

				
			

			

				

					YUSIR 完美CODING世界
				

				

					09-26
					
					8977
					
				

			

		

		

			
				
呼吸灯效果是一种常见的灯光效果，比如网页的按钮，现实生活中比如电脑的开机按钮。

使用CSS3的animation方法可以实现很多迷人的网页动画特效。

使用CSS3 配合box-shadow即可实现类似的效果





样式代码如下


			
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2...

			
		

	





	

		

			

				
					
css3按钮呼吸效果

				
			

			

				

					05-26
				

			

		

		

			
				
可以通过CSS3的animation和@keyframes属性实现按钮呼吸效果，具体实现步骤如下：

1. 定义按钮的基本样式，包括背景色、边框、字体、大小等。

2. 使用animation属性定义动画，设置动画持续时间、动画类型、延迟时间等。例如：

```
.button {
  animation: breath 4s ease-in-out infinite;
}

@keyframes breath {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
  }
}
```

3. 实现呼吸效果的关键在于设置box-shadow属性，通过改变阴影的大小和透明度实现呼吸的效果。

4. 最后，可以通过设置infinite属性使动画无限循环。

完整的代码示例如下：

```
.button {
  background-color: #007bff;
  border: none;
  color: #fff;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 5px;
  animation: breath 4s ease-in-out infinite;
}

@keyframes breath {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
  }
}
```

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值