マウスオーバー時に拡大表示するエフェクト
transitionで変化にかかる時間を調整できる
transformの値を変えることで拡大率を変えることができる
1以下の値にすると縮小になる
ul#nav3 {
height: 150px;
}
ul#nav3 li {
list-style: none;
float: left;
margin-right: 30px;
text-align: center;
-webkit-transition: all 0.5s ease; /*変化にかかる時間*/
-moz-transition: all 0.5s ease;
}
ul#nav3 li:hover {
-webkit-transform: scale( 1.5 ); /*拡大率*/
-moz-transform: scale( 1.5 );
}
ul#nav3 li a {
width: 100px;
color: #fff;
height: 100px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 800px;
-moz-border-radius: 800px;
-webkit-border-radius: 800px;
font-weight: bold;
}
クリック時に立体的に見えるボタン
border-bottomでボタンの下側の色を変えクリック時に下側の色を消すことと、
transformで少し下に下げることによって立体感を出している
.push{
text-align: center;
display: inline-block;
padding: 15px 40px;
background-color: #353535;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin:30%;
border-radius: 4px;
border-bottom: 4px solid #1b1b1b;/*ボタンの影の色*/
}
.push:active {
transform: translateY(4px);/*少し下にずらす*/
border-bottom: none; /*影を消す*/
}
マウスオーバー時に下からテキストなどを表示させることができるエフェクト
transitionでテキスト表示までにかかる時間を調整できる
topで指定した値の文だけtransformでマイナスにすることでスライドさせている
transformの値をプラスにしてtopの値をマイナスにすると上から下にスライドする
.mas {
text-align: center;
display: inline-block;
padding: 15px 40px;
background-color: #353535;
cursor: pointer;
letter-spacing: 2px;
position: relative;
overflow: hidden;
border-radius: 8px 8px 8px 8px; /*角の丸み*/
margin: 30%;
transition: .9s;
}
.mas a{
color: aliceblue;
z-index: 2;
}
.mas:before {
font-family: "FontAwesome";
position: absolute;
left: 20px;
top: 50%;
margin-top: -10px;
}
.mas span {
display: block;
position: absolute;
background-color: #7b2bc7;
top: 50px; /*下に寄せておく*/
right: 0;
width: 100%;
height: 50px;
font-size: 12px;
line-height: 34px;
transition: .5s; /*テキスト表示までにかかる時間*/
}
.mas:hover span {
transform: translateY(-50px); /*下から上にスライド*/
}
マウスオーバー時にボタンの下にテキストを表示するエフェクト
上のエフェクトとほぼ同じだがz-indexで重ね順を変更することで
ボタンの下にテキストを表示している
.mas2 {
display: inline-block;
text-align: center;
padding: 15px 40px;
margin: 30%;
background-color: #353535;
color: aliceblue;
letter-spacing: 2px;
position: relative;
transition: .9s;
}
.mas2:before {
font-family: "FontAwesome";
position: absolute;
left: 20px;
top: 50%;
margin-top: -10px;
}
.mas2 span {
display: block;
position: absolute;
background-color: #7b2bc7;
top: 0;
right: 0;
width: 100%;
height: 34px;
font-size: 14px;
line-height: 34px;
border-radius: 0 0 8px 0;
transition: .5s;/*テキスト表示までにかかる時間*/
z-index: -1; /*重ね順*/
}
.mas2:hover {
border-radius: 8px 0 0;
}
.mas2:hover span {
transform: translateY(50px); /*上から下にスライド*/
z-index: 2; /*重ね順*/
}
マウスオーバー時に下に隠れているテキストを表示するエフェクト
これも2つ上のエフェクトとほぼ同じだが、上にかぶせるのではなく
始めからかぶせてあるものを取り除き下のテキストを表示する
.mas3 {
display: inline-block;
text-align: center;
padding: 15px 40px;
margin: 30%;
background-color: #353535;
color: aliceblue;
letter-spacing: 2px;
overflow: hidden;
position: relative;
transition: .9s;
}
.mas3:before {
font-family: "FontAwesome";
position: absolute;
left: 20px;
top: 50%;
margin-top: -10px;
}
.mas3 span {
display: block;
position: absolute;
background-color: #7b2bc7;
top: 0; /*上に固定*/
right: 0;
width: 100%;
height: 40px;
font-size: 14px;
line-height: 34px;
border-radius: 0 0 8px 0;
transition: .5s; /*テキスト表示までにかかる時間*/
z-index: 1; /*重ね順*/
}
.mas3:hover {
border-radius: 8px 0 0;
}
.mas3:hover span {
transform: translateY(50px); /*上から下にスライド*/
}