下線アニメーション こるようにしたバージョンです。現実的にはこちらの方が登場頻度が多そうな気がします。, /* No.2 */.bd2 div{-webkit-transition:all 0.1s;transition:all 0.1s;}.bd2 div.bdT{transition-delay:0.3s;}.bd2 div.bdL{transition-delay:0.2s;}.bd2 div.bdB{transition-delay:0.1s;}.bd2 div.bdR{transition-delay:0s;}.box:hover .bd2 div.bdT{width: 0;transition-delay:0s;}.box:hover .bd2 div.bdL{height:0;transition-delay:0.1s;}.box:hover .bd2 div.bdB{width: 0;transition-delay:0.2s;}.box:hover .bd2 div.bdR{height:0;transition-delay:0.3s;}, /* No.3 */.bd3 div{-webkit-transition:all 0.2s;transition:all 0.2s;}.box:hover .bd3 div.bdT{-webkit-transform: translate(0,-20px); transform: translate(0,-20px);}.box:hover .bd3 div.bdB{-webkit-transform: translate(0,20px); transform: translate(0,20px); }.box:hover .bd3 div.bdR{-webkit-transform: translate(20px,0); transform: translate(20px,0); }.box:hover .bd3 div.bdL{-webkit-transform: translate(-20px,0); transform: translate(-20px,0);}, /* No.4 */.bd4 div{-webkit-transition:all 0.2s;transition:all 0.2s;}.box:hover .bd4 div.bdT{-webkit-transform: translate(0,20px); transform: translate(0,20px);}.box:hover .bd4 div.bdB{-webkit-transform: translate(0,-20px); transform: translate(0,-20px);}.box:hover .bd4 div.bdR{-webkit-transform: translate(-20px,0); transform: translate(-20px,0);}.box:hover .bd4 div.bdL{-webkit-transform: translate(20px,0); transform: translate(20px,0);}, /* No.5 */.bd5 div{-webkit-transition:all 0.2s;transition:all 0.2s;}.box:hover .bd5 div.bdT{-webkit-transform:rotate(45deg) translate(0,20px); transform:rotate(45deg) translate(0,20px);}.box:hover .bd5 div.bdB{-webkit-transform:rotate(45deg) translate(0,-20px); transform:rotate(45deg) translate(0,-20px);}.box:hover .bd5 div.bdR{-webkit-transform:rotate(45deg) translate(-20px,0); transform:rotate(45deg) translate(-20px,0);}.box:hover .bd5 div.bdL{-webkit-transform:rotate(45deg) translate(20px,0); transform:rotate(45deg) translate(20px,0);}, /* No.6 */.bd6 div{-webkit-transition:all 0.2s;transition:all 0.2s;}.bd6 div:after{content:''; background: #000; position: absolute;-webkit-transition:all 0.2s;transition:all 0.2s;-webkit-transform: translate(0,0); transform: translate(0,0);}.bd6 div.bdT:after{width: 100%; height:2px; top:0; left:0;}.bd6 div.bdB:after{width: 100%; height:2px; bottom:0; right:0;}.bd6 div.bdR:after{height:100%; width :2px; right:0; top:0;}.bd6 div.bdL:after{height:100%; width :2px; left:0; bottom:0;}.box:hover .bd6 div.bdT{-webkit-transform: translate(0,5px); transform: translate(0,5px);}.box:hover .bd6 div.bdB{-webkit-transform: translate(0,-5px); transform: translate(0,-5px);}.box:hover .bd6 div.bdR{-webkit-transform: translate(-5px,0); transform: translate(-5px,0);}.box:hover .bd6 div.bdL{-webkit-transform: translate(5px,0); transform: translate(5px,0);}.box:hover .bd6 div.bdT:after{-webkit-transform: translate(0,-5px); transform: translate(0,-5px);}.box:hover .bd6 div.bdB:after{-webkit-transform: translate(0,5px); transform: translate(0,5px);}.box:hover .bd6 div.bdR:after{-webkit-transform: translate(5px,0); transform: translate(5px,0);}.box:hover .bd6 div.bdL:after{-webkit-transform: translate(-5px,0); transform: translate(-5px,0);}, /* No.7 */.bd7 div{background: none}.bd7 div:before,.bd7 div:after{content:''; background: #000; position: absolute;-webkit-transition:all 0.1s;transition:all 0.1s;}.bd7 div:before{background: #eee}.bd7 div.bdT:after,.bd7 div.bdT:before{width: 100%; height:2px; top:0; left:0; }.bd7 div.bdB:after,.bd7 div.bdB:before{width: 100%; height:2px; bottom:0; right:0;}.bd7 div.bdR:after,.bd7 div.bdR:before{height:100%; width :2px; right:0; top:0; }.bd7 div.bdL:after,.bd7 div.bdL:before{height:100%; width :2px; left:0; bottom:0; }.bd7 div.bdT:after{transition-delay:0.7s;}.bd7 div.bdL:after{transition-delay:0.6s;}.bd7 div.bdB:after{transition-delay:0.5s;}.bd7 div.bdR:after{transition-delay:0.4s;}.bd7 div.bdT:before{transition-delay:0.3s;}.bd7 div.bdL:before{transition-delay:0.2s;}.bd7 div.bdB:before{transition-delay:0.1s;}.bd7 div.bdR:before{transition-delay:0.0s;}.box:hover .bd7 div.bdT:after {width: 0;transition-delay:0.0s;}.box:hover .bd7 div.bdL:after {height:0;transition-delay:0.1s;}.box:hover .bd7 div.bdB:after {width: 0;transition-delay:0.2s;}.box:hover .bd7 div.bdR:after {height:0;transition-delay:0.3s;}.box:hover .bd7 div.bdT:before{width: 0;transition-delay:0.4s;}.box:hover .bd7 div.bdL:before{height:0;transition-delay:0.5s;}.box:hover .bd7 div.bdB:before{width: 0;transition-delay:0.6s;}.box:hover .bd7 div.bdR:before{height:0;transition-delay:0.7s;}, /* No.8 */.bd8 div{-webkit-transition:all 0.2s;transition:all 0.2s;}.box:hover .bd8 div.bdT{-webkit-transform:translate(100px,0); transform:translate(0,20px);}.box:hover .bd8 div.bdB{-webkit-transform:translate(-100px,0); transform:translate(0,-20px);}.box:hover .bd8 div.bdR{-webkit-transform:translate(0px,-100px); transform:translate(-20px,0);}.box:hover .bd8 div.bdL{-webkit-transform:translate(0,100px); transform:translate(20px,0);}, /* No.9 */.bd9 div{-webkit-transition:all 0.2s;transition:all 0.2s; background: none}.bd9 div:before,.bd9 div:after{content:''; background: #000; position: absolute;-webkit-transition:all 0.2s;transition:all 0.2s;-webkit-transform: translate(0,0); transform: translate(0,0);}.bd9 div.bdT:after,.bd9 div.bdT:before{width: 100%; height:2px; top:0; left:0;}.bd9 div.bdB:after,.bd9 div.bdB:before{width: 100%; height:2px; bottom:0; right:0;}.bd9 div.bdR:after,.bd9 div.bdR:before{height:100%; width :2px; right:0; top:0;}.bd9 div.bdL:after,.bd9 div.bdL:before{height:100%; width :2px; left:0; bottom:0;}.box:hover .bd9 div.bdT:before{width: 50%;-webkit-transform: translate(100px,0); transform: translate(0,0);}.box:hover .bd9 div.bdB:before{width: 50%;-webkit-transform: translate(-100px,0); transform: translate(0,0);}.box:hover .bd9 div.bdR:before{height:50%;-webkit-transform: translate(0,-100px); transform: translate(0,0);}.box:hover .bd9 div.bdL:before{height:50%;-webkit-transform: translate(0,100px); transform: translate(0,0);}.box:hover .bd9 div.bdT:after {width: 50%;-webkit-transform: translate(-100px,0); transform: translate(0,0);}.box:hover .bd9 div.bdB:after {width: 50%;-webkit-transform: translate(100px,0); transform: translate(0,0);}.box:hover .bd9 div.bdR:after {height:50%;-webkit-transform: translate(0,100px); transform: translate(0,0);}.box:hover .bd9 div.bdL:after {height:50%;-webkit-transform: translate(0,-100px); transform: translate(0,0);}, /* No.10 */.bd10 div{-webkit-transition:all 0.2s;transition:all 0.2s;}.box:hover .bd10 div.bdT{width: 5px; height: 5px;}.box:hover .bd10 div.bdB{width: 5px; height: 5px;}.box:hover .bd10 div.bdR{width: 5px; height: 5px;}.box:hover .bd10 div.bdL{width: 5px; height: 5px;}, /* No.11 */.bd11 div{display: none;}.bd11 {border: 2px solid #000; height: 100%; width: 100%; position: absolute; top: 0;-webkit-transition:all 0.3s;transition:all 0.3s;}.box:hover .bd11 {-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transform:rotate(180deg); transform:rotate(180deg);border-radius: 50%;}, /* No.12 */.bd12 div{-webkit-transition:all 0.2s;transition:all 0.2s;}.box:hover .bd12 div.bdT{width: 30%;-webkit-transform: translate(70px,100px); transform: translate(70px,100px);}.box:hover .bd12 div.bdB{width: 30%;-webkit-transform: translate(-70px,-100px); transform: translate(-70px,-100px);}.box:hover .bd12 div.bdR{height:30%;-webkit-transform: translate(-100px,70px); transform: translate(-100px,70px);}.box:hover .bd12 div.bdL{height:30%;-webkit-transform: translate(100px,-70px); transform: translate(100px,-70px);}, デモ(クラス切り替えでの実装), デモ(マウスホバーでの実装).

名鉄 領収書 もらい忘れ 5, Nbox タイヤハウス カバー 6, ヤマハ 50cc 旧車 13, トヨタ自動車 異動 内示 19, イエモン 楽園 歌詞 意味 10, 橋野 真依子 Instagram 32, かぐや様は告らせたい 19巻 ネタバレ 9, 地方 公務員 定年延長 何年生まれから 35, フジテレビ 韓国 なぜ 4, 北見工業大学 偏差値 ベネッセ 13, 1992 年 生まれ 芸能人 堀越高校 7, Ada ペア リング 4, Rtx1210 固定ip 設定例 17, 雀 鳴き声 意味 18, マツコの知らない世界 そば スーパー 6, ボウリング サムレス 曲がりすぎ 7, 無印 土鍋 レシピ 23, コイル コンデンサ スイッチ 5, 参議院 天皇の席 なぜ 4, アインシュタイン 稲田 幼少期 21, 所行 意味 山月記 34, ニノ スマホケース インスタ 5, 山陽新幹線 接近放送 声優 8, 恋愛漫画 全巻無料 完結 切ない 7, エドウィン デニスラ 取扱店 5, ペテロ 鍵 意味 5,