CSS的小特效之：融合效果

最新推荐文章于 2025-04-22 09:43:02 发布

pawn_0317

最新推荐文章于 2025-04-22 09:43:02 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： css

原文链接：http://www.195440.com/1575

版权

前端专栏收录该内容

1 篇文章

订阅专栏

CSS的融合效果

首先我们来看一下效果（不会整动图！）

在这里插入图片描述

既然看完了效果我们就来实现一下吧！

原理：
用父物体作为画布添加 filter: contrast()
然后在需要实现的效果的子物体上添加filter:blur()
最终我们就能实现融合效果了。

代码：

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="utf-8">
      <title>融合效果</title>
      <style type="text/css">
      .wrap{
		  filter: contrast(20);
		  background: #fff;
		  overflow: hidden;
		  padding:10px;
		  }
		.left,.right{
		 
		  width: 100px;
		  height: 100px;
		  border-radius: 50%;
		  filter: blur(6px);
		  }
      .left{
		  background-color: black;
		  position:absolute;
		  left:0;animation: move 10s infinite alternate;
		  }
     @keyframes move{
		 100%{
			 left:250px;
			 }
		 }
     .right{
		 background-color: red;
		 margin-left:120px;
		 }
     </style>
 </head>
 <body>
     <div class="wrap">
         <div class="left"></div>
         <div class="right"></div>    
     </div>
 </body>
 </html>