どうもソエです!
今回は完全私得のCSSアニメーションの記事という名のメモです。
一々調べるのが面倒なので、まとめました。
クリックも作ったんですが、後々追加してく予定もあり長くなるかなーと思って分けました。
コードが書いてあるので、コピペして使ってみて下さい!
では、どうぞ!

ナビゲーション用

ホバーすると斜めになるハンバーガーメニュー




HTML
CSS
<section class=”anime1”>
<span class=”anime1-span1”></span>
<span class=”anime1-span2”></span>
<span class=”anime1-span3”></span>
</section>

ホバーすると出てくるメニュー

HTML
CSS
<section class=”anime2”>
<span class=”anime2-link”></span>
<span class=”anime2-link”></span>
<span class=”anime2-link”></span>
</section>

リンク用

ホバー横から背景色が変わるリンク

HTML
CSS
<section id=”anime3” class=”anime3”>
<aclass=”anime3-link”></a>
</section>

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ CSS/

【コピペOK】ホバー限定CSSアニメーションメモ