Result 水上で起こる波紋のようなエフェクトです csshtml, body {/*bodyの背景を波紋の色に合わせる*/ margin: 0; background: #45c2c5; } .ripple, .ripple:before, .ripple:after {/*疑似要素も作り、3つの波紋を作る*/ display: block; border-radius: 2px; width: 2px; height: 2px; animation: rip 6s infinite ease-out; } .ripple { position: absolute; z-index: -1; top: 40px; left: 15px; } .ripple:before, .ripple:after { content: ""; position: absolute; } .rippl
![水の波紋っぽいエフェクト](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6b1c87ada2ad66409793e3653c810e333009609/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2019%2F12%2Fsite-icon.png)