css实现融合效果

  
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="utf-8">
 5     <title>融合效果</title>
 6     <style type="text/css">
 7     .box{filter: contrast(20);background: #fff;overflow: hidden;padding:10px;}
 8     .left,.right{display:inline-block;width: 100px;height: 100px;border-radius: 50%;filter: blur(6px);}
 9     .left{background-color: black;position:absolute;left:0;animation: move 10s infinite alternate;}
10     @keyframes move{100%{left:250px;}}
11     .right{background-color: red;margin-left:120px;}
12     </style>
13 </head>
14 <body>
15     <div class="box">
16         <div class="left"></div>
17         <div class="right"></div>    
18     </div>
19 </body>
20 </html>

 

 

posted @ 2017-10-18 10:49  zenderdi  阅读(1013)  评论(0)  编辑  收藏  举报