Result
アニメーションで動くボケた玉をCSSで実装したもの
方法はシンプルで、以下のようにkeyframesで作ったアニメーションをanimation-duration、animation-delay、transform-originで位置やタイミングを各ボケ毎にずらしてあります。
.background span:nth-child(17) {
color: #583C87;
top: 19%;
left: 52%;
animation-duration: 12.9s;
animation-delay: -0.1s;
transform-origin: 8vw -3vh;
box-shadow: 40vmin 0 7.7373093096vmin currentColor;
}
.background span:nth-child(18) {
color: #583C87;
top: 82%;
left: 14%;
animation-duration: 15s;
animation-delay: -8.6s;
transform-origin: 2vw -9vh;
box-shadow: -40vmin 0 5.0331967733vmin currentColor;
}
・
・
・
|
html
<div class="background">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
|
via
Bokeh effect (CSS)
