2つのボールが交差する粘着効果を実現するCSSサンプルコード

<div class="効果">
  <div class="ブラックボール"></div>
  <div class="redball"></div>
</div>

。効果{
  幅:100%;
  高さ:100%;
  パディング上部:50px;
  フィルター:コントラスト(10);
  背景:#fff;
}
.ブラックボール{
  幅:100ピクセル;
  高さ:100px;
  背景：黒;
  パディング:10px;
  境界線の半径:50%;
  マージン:0 自動;
  zインデックス:1;
  フィルター:ぼかし(5px);
}
.レッドボール{
  幅:60ピクセル;
  高さ:60px;
  背景:#f00;
  パディング:10px;
  境界線の半径:50%;
  位置:絶対;
  上:70px;
  左:50px;
  zインデックス:2;
  フィルター:ぼかし(5px) ;
  アニメーション:rball 6s 無限;
}

@keyframes rball{
  0%,100%{
    左:35px;
    幅:60ピクセル;
    高さ:60px;
  }
  4%,54%{
    幅:60ピクセル;
    高さ:60px;
  }
  10%,60%{
    幅:50px;
    高さ:70px;
  }
  20%,70%{
    幅:60ピクセル;
    高さ:60px;
  }
  34%,90%{
    幅:70px;
    高さ:50px;
  }
  41%
    幅:60ピクセル;
    高さ:60px;
  }
  50%{
    左:calc(100% - 95px);
    幅:60ピクセル;
    高さ:60px;
  }
}

.ブルーボール1{
  幅:80ピクセル;
  高さ:80px;
  背景:#00f;
  パディング:10px;
  境界線の半径:50%;
  位置:絶対;
  上:230px;
  左:0;
  zインデックス:2;
  フィルター:ぼかし(8px) ;
  アニメーション:bball1 6秒無限;
}
.ブルーボール2{
  幅:80ピクセル;
  高さ:80px;
  背景:#00f;
  パディング:10px;
  境界線の半径:50%;
  位置:絶対;
  上:230px;
  左:240px;
  zインデックス:2;
  フィルター:ぼかし(8px) ;
  アニメーション:bball2 6秒無限;
}
@keyframes bball1{
  0%,100%{
    左:0;
    上:230px;
    幅:80ピクセル;
    高さ:80px;
  }
  20%
    上:230px;
    幅:80ピクセル;
    高さ:80px;
  }
  85%
    上:230px;
    左:75px;
    幅:90ピクセル;
    高さ:70px;
  }
  90%
    上:228px;
    幅:75px;
    高さ:85px;
  }
  50%{
    上:215px;
    左:110px;
    幅:110ピクセル;
    高さ:110ピクセル;
  }
}
@keyframes bball2{
  0%,100%{
    左:240px;
    上:230px;
    幅:80ピクセル;
    高さ:80px;
  }
  20%
    上:230px;
    幅:80ピクセル;
    高さ:80px;
  }
  85%
    上:230px;
    左:165px;
    幅:90ピクセル;
    高さ:70px;
  }
  90%
    上:228px;
    幅:75px;
    高さ:85px;
  }
  50%{
    左:110px;
    上:215px;
    幅:110ピクセル;
    高さ:110ピクセル;
  }
}