JKの体験記

2科目6単位以内を目指す北のJK(女子高専生)によるブログ

かわいい動きを再現したい

f:id:saberhanako:20191217213108p:plain

HTMLとCSSで作りました

これはLOCAL students Advent Calendar2019の18日目の記事です。

adventar.org

 

はじめに

こんにちは。最北の高専で手書きレポートと戦っています、みやもっちゃんです。

最近までしばらく後期中間試験を頑張っていましたが良い感じの結果で終えることができたので、今は進捗の方を頑張っているところです。

近況報告はこれくらいにして、早速アドカレの内容に入りましょう。

"かわいい動き" is何？

今回の題名を読んで謎に思った方も多いと思います。

"かわいい動き"とは？🤔

かわいい動きisCSSを使ったかわいいアニメーションもどきです。

パソコンでいろんな企業のホームページとかを見てるとマウスオーバーの時の処理の動きがかわいいとかエモかったりする時あるじゃないですか。アレのことです。わかって。

本題

ということで今回は私が一目惚れした処理のコードを元にかわいい(自己満)ものを作りたいと思います。

 

まずは元の処理を再現したものを見てみましょう。

はい、とてもかわいい〜〜〜〜〜〜！！！！！これは一目惚れですね。動いてるだけでかわいい。

それではここからアレンジしていきましょう。

①鍵かっこみたいにする

widthとheightの値、始点を変えただけです。

これもかわいいな…

②なんかオシャンな感じにする

これもwidthとheightの値、始点を変えただけです。

なんかオシャンでかわいい…

ちなみに一番初めの画像にも使っています。

 

これだけだと内容が寂しいので円でも少し遊んでみました。

 円で遊んだ

 かわいいねぇ、、、😊

そして他の人にもかわいいって言ってもらえて嬉しい、、、

まとめ

CSSでtransition系を使った動きにするとだいたい可愛くなる説を発見した気がしました。

さいごに

今はまだCSSたのし〜〜！！！くらいのよわよわなので、勉強も兼ねてちょっくらポートフォリオでも作っていこうかなと思います。(前日のげんしの記事に感化された)

今回生み出した子たちを使っていけると楽しそうですね。

最後まで記事を読んでいただきありがとうございました！