質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

2085閲覧

マウスホバーでアニメーション

ryohasegawa

総合スコア437

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2016/10/11 13:23

html

1 <body> 2 <ul> 3 <li class="type3"> 4 <img src="ffffff&amp;text=Minecraft"> 5 <a href=""> 6 <dl> 7 <dt>1</dt> 8 <dd>aaaaaaaaaaaaaaaaa</dd> 9 </dl> 10 </a> 11 </li> 12 <li class="type3"> 13 <img src="ffffff&amp;text=About"> 14 <a href=""> 15 <dl> 16 <dt>2</dt> 17 <dd>bbbbbbbbbbbbbbbbbbb</dd> 18 </dl> 19 </a> 20 </li> 21 <li class="type3"> 22 <img src="ffffff&amp;text=Twitter"> 23 <a href=""> 24 <dl> 25 <dt>3</dt> 26 <dd>cccccccccccccccccccc</dd> 27 </dl> 28 </a> 29 </li> 30 </ul> 31 </body>

css

1ul{ 2 /* 要素と中の題名を中央にする */ 3 text-align: center; 4} 5ul li dl { 6 /* 要素の横と高さを決める */ 7 width: 200px; 8 height: 180px; 9} 10ul li { 11 display: inline-block; 12 position: relative; 13 overflow: hidden; 14 margin: 0 5px; 15 letter-spacing: 0; 16} 17ul dl { 18 box-sizing: border-box; 19 -moz-box-sizing: border-box; 20 position: absolute; 21 top: 0; 22 margin: 0; 23 padding: 20px 25px; 24 color: #fff; 25 background: rgba(205,92,92,.9); 26} 27ul dl dd { 28 margin: 0; 29 font-size: 10px; 30 line-height: 1.6; 31 text-align: justify; 32 word-break: break-all; 33} 34 35dd:last-of-type { 36 margin-top: 10px; 37 text-align: center; 38} 39 40/* type3 */ 41 42.type3 dl { 43 background-color: transparent; 44} 45 46.type3 dl dt, 47.type3 dl dd { 48 position: relative; 49 z-index: 1; 50 opacity: 0; 51 transition: opacity 0.3s; 52} 53 54.type3:hover dl dt, 55.type3:hover dl dd { 56 opacity: 1; 57 transition-delay: 0.3s; 58} 59 60.type3 dl::before, 61.type3 dl::after { 62 content: ""; 63 display: block; 64 position: absolute; 65 top: 0; 66 left: 0; 67 width: 100px; 68 height: 180px; 69 background: #cd5c5c; 70 opacity: 0; 71 -webkit-transition: opacity 0.6s, -webkit-transform 0.6s; 72 transition: opacity 0.6s, transform 0.6s; 73} 74 75.type3:hover dl::before, 76.type3:hover dl::after { 77 opacity: 0.9; 78 transition-duration: 0.3s; 79} 80 81.type3 dl::before { 82 -webkit-transform: translateX(-175px) skew(-30deg); 83 transform: translateX(-175px) skew(-30deg); 84} 85 86.type3 dl::after { 87 -webkit-transform: translateX(275px) skew(-30deg); 88 transform: translateX(275px) skew(-30deg); 89} 90 91.type3:hover dl::before { 92 -webkit-transform: translateX(0) skew(0); 93 transform: translateX(0) skew(0); 94} 95 96.type3:hover dl::after { 97 -webkit-transform: translateX(100px) skew(0); 98 transform: translateX(100px) skew(0); 99}

イメージ説明

あるサイトでマウスをホバーさせると動くアニメーションのようなものが動くというのを見てソースをコピーしました。
データを見てもさっぱり仕組みがわからず、少しずつファイルを削って行き、必要最低限の
データだけにして、解析をやってみたのですが、わかりません。

解説していただける方解説をお願いします。それと拡張子のないファイルが3つあったのですが、それに関しても教えて下さい。
ファイルを公開しておきます。
https://box.yahoo.co.jp/guest/viewer?sid=box-l-knv2i7f7fw4utw25u7rnp4vhbe-1001&uniqid=1f7e3c15-e88b-44e3-bcb0-7a5c58e7305e

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

hover時にCSSでアニメーションしているだけですね。

  1. dl:beforedl:afterが変形(-30degから0deg)し、透明度を変えながら(0から0.9)範囲外から移動して(-175pxから0pxと275pxから100px)きます。(0.3s)

それによって閉じるようなアニメーションになります。

  1. 0.3s後にdl dtdl ddの透明度が0から1に変化します。(0.3s)

拡張子の無いファイルは何かのスクリプト(PHPなど)で画像を生成しています。

https://placehold.jp/
上記なんかはテスト用に使える画像を提供してますね。
https://placehold.jp/3d4070/ffffff/200x180.png?text=Minecraft
こんな感じで表示できます。

投稿2016/10/14 10:02

編集2016/10/14 10:03
shi_ue

総合スコア4437

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問