CSS
【CSS】異なるホバー効果different hover effects on div block
August 2, 2016

different-hover-effects-on-div-blockはdiv要素上の異なるホバー効果
<!DOCTYPE html> <html> <head> <link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'> <style type="text/css"> body > div { margin:121px 149px; width:483px; height:298px; background:#676470; color:#fff; font-family:Lato; font-weight:900; font-size:3.4em; text-align:center; line-height:298px; transition:all 0.3s ease; } .rotate:hover { -webkit-transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); transform: rotateZ(-30deg); } </style> </head> <body> <div class="rotate">Rotate</div> </body> </html>
<!DOCTYPE html> <html> <head> <link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'> <style type="text/css"> body > div { margin:121px 149px; width:483px; height:298px; background:#676470; color:#fff; font-family:Lato; font-weight:900; font-size:3.4em; text-align:center; line-height:298px; transition:all 0.3s; } .fade { opacity:0.5; } .fade:hover { opacity:1; } </style> </head> <body> <div class="fade">Fade in</div> </body> </html>