マウスオーバー時にボタンの背景色が変わるエフェクト
transitionの値を変えることで色の変化にかかる時間を調整できる
:hover以下を変えることでマウスオーバー時の動作を変えることができる
ul#nav1 li {
margin-top: 30%;
list-style: none;
}
ul#nav1 li a {
display: block;
width: 130px;
background-color: #fff;
float: left;
padding: 5px;
text-align: center;
border: solid 1px #999;
margin-left: -1px;
-webkit-transition: all 1s ease; /*変化にかかる時間*/
-moz-transition: all 1s ease;
font-weight: bold;
}
ul#nav1 li a:hover {
background: #f58cff; /*マウスオーバー時の背景色*/
}
マウスオーバー時に文字が光っているように見えるエフェクト
transitionの値を変えることで色の変化にかかる時間を調整できる
:hover以下のtext-shadowの値を変更することで色や範囲を変えることができる
ul#nav2 li {
margin-top: 30%;
list-style: none;
}
ul#nav2 li a {
display: block;
width: 130px;
background-color: #fff;
float: left;
padding: 5px;
text-align: center;
border: solid 1px #999;
-webkit-transition: all 1s ease; /*変化にかかる時間*/
-moz-transition: all 1s ease;
font-weight: bold;
}
ul#nav2 li a:hover { /*マウスオーバー時*/
text-shadow: #e23df1 10px 10px 30px; /*光の色と大きさ*/
color: #f49ffc; /*文字の色*/
}
マウスオーバー時にボタンの端から色が変わるエフェクト
transitionの値を変えることで色の変化にかかる時間を調整できる
leftをrightに変えることで左端から色が変わるエフェクトになる
opacityの値を変更することで透明度を変えることができる
.slide1:before { /*通常時*/
content: "";
position: absolute;
height: 100%;
width: 0;
background : #f697ff;
left: 100%; /*右側に寄せている*/
bottom: 0;
transition: all .3s; /*変化にかかる時間*/
opacity: 0.5; /*透明度*/
}
.slide1:hover:before { /*マウスオーバー時*/
width: 100%;
left:0; /*左に寄せる*/
}
マウスオーバー時にグラデーションが変化するエフェクト
backgroundでグラデーションの開始色と終了色をカンマ区切りで指定する
transitionの値を変えることでグラデーションにかかる時間を調整できる
degはグラデーションの角度 初期値は180deg
.gra, .gra:before {
background: rgba(231,72,234,1); /*グラデーションの開始色と終了色の指定*/
background: -moz-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(231,72,234,1)), color-stop(100%, rgba(75,26,188,1)));
background: -webkit-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%);
background: -o-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%);
background: -ms-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%);
background: linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e748ea', endColorstr='#4b1abc', GradientType=1 );
}
.gra:hover{ /*マウスオーバー時*/
transition: all .5s; /*変化にかかる時間*/
filter: hue-rotate(120deg);/*グラデーションの角度*/
}