CSS3涟漪效果

最新推荐文章于 2022-06-28 10:10:43 发布

enter键上的妹妹

最新推荐文章于 2022-06-28 10:10:43 发布

阅读量1.2k

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/m0_47883103/article/details/106320706

版权

不多BB
直接上思路
比如我们想给这个加一个涟漪效果
在这里插入图片描述
涟漪要有滴 , 这个涟漪随便用个标签表示 , 我就用span了,于是我们得到了以下代码

<div class="live">
       <img src="img/story_brief_icon.png" alt="">
       <span></span>
  </div>

小小的span要站在img后 , 而且不能挡住img , 怎么解决 ? 定位嘛 !

.live{
      position: relative;	/*定位要成对儿使用*/
}
.live img{
      width: 36px;
      height: 36px;
      z-index: 0;	/*避免自己被挡住,(数值大于span的index就行)*/
}
.live span{
      width: 36px;/*加个宽高,使其和图片一样*/
      height: 36px;
      position: absolute;	/*定位,使其和图片重合*/
      left: 0;
      top: 0;
      background: #0db083;	/*来个背景色,好看*/
      border-radius: 50%;	/*圆的,跟图片保持一致*/
      z-index: -1;	/*别挡住图片*/
}

准备工作完成 , 思路清晰起来了 , 采用CSS3的帧动画 , 让咱们的span放大 , 同时自身慢慢变得透明

@keyframes living {
       0%{
           transform: scale(1);
           opacity:0.7;  
       }
       100%{
           transform: scale(3);
           opacity: 0;
       }
}

舞起来吧 , span !!

.live span{
      width: 36px;
      height: 36px;
      position: absolute;
      left: 0;
      top: 0;
      background: #0db083;
      border-radius: 50%;
      z-index: -1;     
      animation: living 3s linear infinite; /*起舞!!!!*/
           
}

在这里插入图片描述
效果已经出来了 , 为了让效果更佳好看 , 我们可以多加几个span , 同时多加几个动画帧 , 别忘了给几个span分别加个动画延迟效果 , 一个个排队来

		.live{
           position: relative;
           width: 36px;
           height: 36px;
           margin: 500px auto 0;
       	}
      	.live img{
           width: 36px;
           height: 36px;
           z-index: 0;
     	}
        @keyframes living {
            0%{
            	transform: scale(1);
                opacity:0.7;  
            }
            25%{
            	transform: scale(1.5);
                opacity:0.5;
            }
            50%{
                transform: scale(2);
                opacity: 0.3;  
            }
            75%{
            	transform: scale(2.5);
                opacity:0.2;
            }
            100%{
               transform: scale(3);
               opacity: 0;
            }
        }
        .live span{
        	width: 36px;
            height: 36px;
           	position: absolute;
            left: 0;
            top: 0;
            background: #0db083;
            border-radius: 50%;
            animation: living 3s linear infinite;
            z-index: -1;
		}
        .live span:nth-child(2){
            animation-delay: 0.8s; 
        }
		.live span:nth-child(3){
            animation-delay: 1.6s; 
        }
        .live span:nth-child(4){
            animation-delay: 3.2s; 
        }
	</style>
	<body>
	<div class="live">
        <img src="img/story_brief_icon.png" alt="">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
     </div>

enter键上的妹妹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3涟漪效果

不多BB直接上思路比如我们想给这个加一个涟漪效果涟漪要有滴 , 这个涟漪随便用个标签表示 , 我就用span了,于是我们得到了以下代码<div class="live"> <img src="img/story_brief_icon.png" alt=""> <span></span> </div>小小的span要站在img后 , 而且不能挡住img , 怎么解决 ? 定位嘛 !.live{
复制链接

扫一扫