CSSマウスフローティングの簡単な特効
1729 ワード
最近暇になった時、ホーバーフローティングの小さな特効をしました.
まず最も簡単なHTML、私はただ2つのDIVだけを設置して、観察しやすくて、興味と技術の自分で拡張することができて、例えばピクチャーのスケールを追加します
HTMLコード:
CSSコード:
その で、 の に えて、 も なのはCSSのhoverセレクタです.
transitionプロパティ
するall:hoverは、マウスがDIV(all)に したときに られる を できます.
それでall:hover .titleはマウスをフローティングすることができる.all タイトルで られる
Transitionプロパティの は、これらの の を することができます. の は、 で した によって なります.ここでは0.1 sと0.3 sを しています.
コード を するために、0を して かないことができる....
これは のつまらないゲームですが、 にHTMLやCSSを んだ さんもこの を じています.
JavaScriptの をアップロードするかもしれません.. を てください. は ままな です.
まず最も簡単なHTML、私はただ2つのDIVだけを設置して、観察しやすくて、興味と技術の自分で拡張することができて、例えばピクチャーのスケールを追加します
HTMLコード:
CSSコード:
.all{
width: 200px;
height: 200px;
border: solid 1px #e1e2e3;
margin: auto;
transition: .1s;
}
.title{
height: 50px;
line-height: 50px;
text-align: center;
background-color: #e1e2e3;
font-size: 20px;
transition: .3s;
}
.all:hover{
box-shadow: 0 0 10px #0ff;
border-color:#0ff;
width: 500px;
height: 400px;
}
.all:hover .title{
background-color:#0ff;
color:#fff;
height: 150px;
line-height: 150px;
}
その で、 の に えて、 も なのはCSSのhoverセレクタです.
transitionプロパティ
するall:hoverは、マウスがDIV(all)に したときに られる を できます.
それでall:hover .titleはマウスをフローティングすることができる.all タイトルで られる
Transitionプロパティの は、これらの の を することができます. の は、 で した によって なります.ここでは0.1 sと0.3 sを しています.
コード を するために、0を して かないことができる....
これは のつまらないゲームですが、 にHTMLやCSSを んだ さんもこの を じています.
JavaScriptの をアップロードするかもしれません.. を てください. は ままな です.