效果如下:
代码实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{filter: contrast(20);background: #fff;overflow: hidden;padding:10px;} .left,.right{display:inline-block;width: 100px;height: 100px;border-radius: 50%;filter: blur(6px);} .left{background-color: black;position:absolute;left:0;animation: move 2s infinite alternate;} @keyframes move{100%{left:250px;}} .right{background-color: red;margin-left:120px;} </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
实现原理:
1、模糊滤镜filter: blur(): 给图像设置高斯模糊效果
2、对比度滤镜filter: contrast(): 调整图像的对比度
当它们同时使用时,产生了奇妙的融合现象,通过对比度滤镜把高斯模糊的模糊边缘给隐藏,利用高斯模糊实现融合效果
评论前必须登录!
注册