html - これはどんなグラフィックですか？

Question

http://googleblog.blogspot.in/

マウスをボールの上に移動すると、ボールが跳ね返ります。誰もがこれがどのように行われているのかわかりますか。

Answer 1

各ボールは次のように作成されたdivです。

<div style="position: absolute; z-index: -1; border-top-left-radius: 400px; border-top-right-radius: 400px; border-bottom-right-radius: 400px; border-bottom-left-radius: 400px; background-color: rgb(68, 134, 197); -webkit-transform: translate(0.13934886012209222px, 15.280991621327088px); width: 40.078411732250885px; height: 40.078411732250885px; "></div>

丸い形はのおかげで作られてい-webkit-transform:matrix()ます;

動きは、マウスボタンと数式をキャプチャするプレーンなJavaScriptで行われます。

Answer 2

丸い角のdivといくつかのCSS3トリックを備えた純粋なcss