マガジンのカバー画像

技術？

7
本
運営しているクリエイター
Miranda / 玉子豆腐

#アニメーション

Miranda / 玉子豆腐

Miranda / 玉子豆腐

水中っぽいアニメーションをCSSとjQueryで作ってみる

水中っぽいアニメーションをCSSとjQueryで作ってみる

最近なんだか暑いので、気分だけでも涼もうということで水中っぽい、泡が出るアニメーションを作ってみた。

はじめに実は泡が出るアニメーションはすでに多数存在する。ただ自分が表現したいものとは違っていたので、既出のものを参考にしながら作ってみた。

水中を表現しよう水中は絵でもグラデーションで表現することが多い。海藻や魚があれば別だが、個人的には青一色だとのっぺりした印象になり、水中だと認識しにくい。

もっとみる
Miranda / 玉子豆腐

Miranda / 玉子豆腐

CSSアニメーションを使ってまばたきをさせてみる

CSSアニメーションを使ってまばたきをさせてみる

前回のおまけみたいなもの。CSSアニメーションもいろいろ触ってみたかったので、まばたきするアニメーションを作ってみた。

準備するもの元の画像と動かしたいもの。動かしたいものは透過pngにしておく。

元の画像↓

今回動かしたいのは目の部分なので、目を開けた状態と閉じた状態の透過画像を用意した。

この時、画像サイズを揃えておくと楽に重ねることができる。

CSSアニメーションを使ってみようまず

もっとみる