CSS3で作るマウスオーバーアニメーション
背景色が変化するアニメーション
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Flexboxを使ったナビゲーション</title> <style> html,body,h1,ul,li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; color: inherit; } .container { width: 960px; margin: 50px auto; } h1 { margin-bottom: 30px; } .gnav { display: flex; justify-content: space-between; width: 640px; margin: auto; } .gnav li { width: 25%; height: 40px; border: 1px solid #aaa; border-right: 0; box-sizing: border-box; text-align: center; line-height: 40px; font-weight: bold; transition: 0.3s; } .gnav li:last-child { border-right: 1px solid #aaa; } .gnav li:hover { background: #3b94e2; color: #fff; } </style> </head> <body> <div class="container"> <h1>背景色が変化するアニメーション</h1> <ul class="gnav"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">LINK</a></li> </ul> </div><!-- /.container --> </body> </html>
横からスライドするアニメーション
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Flexboxを使ったナビゲーション</title> <style> html,body,h1,ul,li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; color: inherit; } .container { margin: 50px; } h1 { margin-bottom: 20px; } .gnav { overflow: hidden; } .gnav li { width: 300px; height: 60px; margin: 14px; padding-right: 40px; margin-left: -140px; line-height: 60px; color: #fff; font-size: 20px; font-weight: bold; text-align: right; border-top-right-radius: 60px; border-bottom-right-radius: 60px; transition: 0.4s; } .gnav li:hover { margin-left: 0; cursor: pointer; } .c1 { background-color: #FF9933; } .c2 { background-color: #00CCFF; } .c3 { background-color: #33CC66; } .c4 { background-color: #FF84D7; } </style> </head> <body> <div class="container"> <h1>横からスライドするアニメーション</h1> <ul class="gnav"> <li class="c1">HOME</li> <li class="c2">ABOUT</li> <li class="c3">GALLERY</li> <li class="c4">LINK</li> </ul> </div><!-- /.container --> </body> </html>
拡大・縮小するアニメーション
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>拡大・縮小するアニメーション</title> <style> html, body, h1, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; color: inherit; } .content { margin: 100px; } h1 { margin-bottom: 30px; font-size: 20px; color: #666; } .gnav { display: flex; width: 640px; } .gnav li { width: 100px; height: 100px; margin: 15px; border-radius: 50%; color: #FFF; font-weight: bold; line-height: 100px; text-align: center; transition: 0.4s; } .gnav li:hover { transform: scale( 1.5 ); } .c1 { background-color: #FF9933; } .c2 { background-color: #00CCFF; } .c3 { background-color: #33CC66; } .c4 { background-color: #FF84D7; } </style> </head> <body> <div class="content"> <h1>拡大・縮小するアニメーション</h1> <ul class="gnav"> <li class="c1"><a href="#">HOME</a></li> <li class="c2"><a href="#">ABOUT</a></li> <li class="c3"><a href="#">GALLERY</a></li> <li class="c4"><a href="#">LINK</a></li> </ul> </div> </body> </html>
