マウスホバーでアニメーション
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 1,221
<body>
<ul>
<li class="type3">
<img src="ffffff&text=Minecraft">
<a href="">
<dl>
<dt>1</dt>
<dd>aaaaaaaaaaaaaaaaa</dd>
</dl>
</a>
</li>
<li class="type3">
<img src="ffffff&text=About">
<a href="">
<dl>
<dt>2</dt>
<dd>bbbbbbbbbbbbbbbbbbb</dd>
</dl>
</a>
</li>
<li class="type3">
<img src="ffffff&text=Twitter">
<a href="">
<dl>
<dt>3</dt>
<dd>cccccccccccccccccccc</dd>
</dl>
</a>
</li>
</ul>
</body>ul{
/* 要素と中の題名を中央にする */
text-align: center;
}
ul li dl {
/* 要素の横と高さを決める */
width: 200px;
height: 180px;
}
ul li {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0 5px;
letter-spacing: 0;
}
ul dl {
box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
top: 0;
margin: 0;
padding: 20px 25px;
color: #fff;
background: rgba(205,92,92,.9);
}
ul dl dd {
margin: 0;
font-size: 10px;
line-height: 1.6;
text-align: justify;
word-break: break-all;
}
dd:last-of-type {
margin-top: 10px;
text-align: center;
}
/* type3 */
.type3 dl {
background-color: transparent;
}
.type3 dl dt,
.type3 dl dd {
position: relative;
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
}
.type3:hover dl dt,
.type3:hover dl dd {
opacity: 1;
transition-delay: 0.3s;
}
.type3 dl::before,
.type3 dl::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 180px;
background: #cd5c5c;
opacity: 0;
-webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
transition: opacity 0.6s, transform 0.6s;
}
.type3:hover dl::before,
.type3:hover dl::after {
opacity: 0.9;
transition-duration: 0.3s;
}
.type3 dl::before {
-webkit-transform: translateX(-175px) skew(-30deg);
transform: translateX(-175px) skew(-30deg);
}
.type3 dl::after {
-webkit-transform: translateX(275px) skew(-30deg);
transform: translateX(275px) skew(-30deg);
}
.type3:hover dl::before {
-webkit-transform: translateX(0) skew(0);
transform: translateX(0) skew(0);
}
.type3:hover dl::after {
-webkit-transform: translateX(100px) skew(0);
transform: translateX(100px) skew(0);
}
あるサイトでマウスをホバーさせると動くアニメーションのようなものが動くというのを見てソースをコピーしました。
データを見てもさっぱり仕組みがわからず、少しずつファイルを削って行き、必要最低限の
データだけにして、解析をやってみたのですが、わかりません。
解説していただける方解説をお願いします。それと拡張子のないファイルが３つあったのですが、それに関しても教えて下さい。
ファイルを公開しておきます。
https://box.yahoo.co.jp/guest/viewer?sid=box-l-knv2i7f7fw4utw25u7rnp4vhbe-1001&uniqid=1f7e3c15-e88b-44e3-bcb0-7a5c58e7305e
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
hover時にCSSでアニメーションしているだけですね。
dl:beforeとdl:afterが変形（-30degから0deg）し、透明度を変えながら（0から0.9）範囲外から移動して（-175pxから0pxと275pxから100px）きます。(0.3s)
それによって閉じるようなアニメーションになります。0.3s後に
dl dtとdl ddの透明度が0から1に変化します。(0.3s）
拡張子の無いファイルは何かのスクリプト（PHPなど）で画像を生成しています。
https://placehold.jp/
上記なんかはテスト用に使える画像を提供してますね。
https://placehold.jp/3d4070/ffffff/200x180.png?text=Minecraft
こんな感じで表示できます。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 89.97%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
2016/10/13 11:18
こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。