ロゴにhoverした際にアニメーションが動くようにする
・animate.cssを使用します。CDNを利用します。↓
https://animate.style/
ちなみにCDNのコードをheadに貼り付けてます。コードはこちら↓
<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/> ・WEBサイトは前回作成したものを使います↓
https://qiita.com/pontarou194/items/bfab247bc26ed86c47ee
完成したアニメーションロゴがこちら
やり方
①animate.cssのCDN（コンテンツデリバリーネットワーク）をheadにはりつけ
<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>②ロゴにclass名をつける
③つけたclass名を動かすCSSを記述する
完成したコードがこちら
html
<!DOCTYPE html><!-- Created By CodingNepal --><htmllang="ja"><head><metacharset="utf-8"><title>おしゃれWEBサイト</title><linkrel="stylesheet"href="30_4.css"><metaname="viewport"content="width=device-width, initial-scale=1.0"><script src="https://kit.fontawesome.com/a076d05399.js"></script><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/></head><body><nav><inputtype="checkbox"id="check"><labelfor="check"class="checkbtn"><iclass="fas fa-bars"></i></label><labelclass="logo"><ahref="#"class="logo animate_bounce">Cool♪</a></label><ul><li><aclass="active"href="#">ホーム</a></li><li><ahref="#">会社概要</a></li><li><ahref="#">事業内容</a></li><li><ahref="#">お問い合わせ</a></li><li><ahref="#">採用情報</a></li></ul></nav><videosrc="goomalling-storm.mp4"loop=""autoplay=""muted=""width="100%"class="bgv"></video><divclass="center"><divclass="outer button"><button>ログイン</button></div><divclass="outer circle"><button>新規登録</button></div></div></body></html>CSS
@importurl('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');*{margin:0;padding:0;box-sizing:border-box;list-style:none;text-decoration:none;}html{background-color:black;}nav{background:black;height:80px;width:100%;}label.logoa{color:white;font-size:33px;line-height:80px;padding:0140px;font-weight:600;}navul{float:right;margin-right:60px;}navulli{display:inline-block;line-height:80px;margin:02px;}navullia{color:#f2f2f2;font-weight:500;font-size:20px;padding:7px13px;border-radius:3px;text-transform:uppercase;font-family:'Poppins',sans-serif;}a.active,a:hover{background:black;transition:.5s;}.checkbtn{font-size:30px;color:white;float:right;line-height:80px;margin-right:40px;cursor:pointer;display:none;}#check{display:none;}@media(max-width:952px){label.logo{font-size:27px;padding-left:25px;}navullia{font-size:16px;}}@media(max-width:858px){.checkbtn{display:block;margin-right:40px;}ul{position:fixed;width:100%;height:100vh;background:black;top:80px;left:-100%;text-align:center;transition:all.5s;}navulli{display:block;margin:50px0;line-height:30px;}navullia{font-size:20px;}a:hover,a.active{background:none;color:black;}#check:checked~ul{left:0;}}section{background-size:cover;height:calc(100vh-80px);}.center{display:flex;text-align:center;align-items:center;justify-content:center;}.outer{position:relative;margin:050px;background:black;}.button{height:70px;width:220px;border-radius:50px;}.circle{height:200px;width:200px;border-radius:50%;}.outerbutton,.outerspan{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}.outerbutton{background:black;color:#f2f2f2;outline:none;border:none;font-size:20px;z-index:9;letter-spacing:1px;text-transform:uppercase;cursor:pointer;}.buttonbutton{height:60px;width:210px;border-radius:50px;}.circlebutton{height:180px;width:180px;border-radius:50%;}.outerspan{height:100%;width:100%;background:inherit;}.buttonspan{border-radius:50px;}.circlespan{border-radius:50%;}.outer:hoverspan:nth-child(1){filter:blur(7px);}.outer:hoverspan:nth-child(2){filter:blur(14px);}.outer:hover{background:linear-gradient(#14ffe9,#ffeb3b,#ff00e0);animation:rotate2.5slinearinfinite;}@keyframesrotate{0%{filter:hue-rotate(0deg);}100%{filter:hue-rotate(360deg);}}@media(max-width:640px){.center{flex-wrap:wrap;flex-direction:column;}.outer{margin:50px0;}}.logo{display:inline-flex;width:180px;height:55px;margin:015px;perspective:1000px;}.animate_bounce:hover{animation-name:bounce;animation-duration:1s;animation-iteration-count:infinite;}最後のanimete_bounceというclass名にanimateCSSを追加で記述しただけです。
通常のanimete.cssだとアクセスした際や更新した際に反応するだけでしたので、（それだけだとつまらないので）
今回はhoverした際にアニメーションが無限で動く仕様にしています。
以上となります。
ここは間違っている、こうしたほうが良い等々ございましたらご指摘いただけますと幸いです。
最後までみていただきありがとうございます。
