CSS3で作るホバーアニメーション(1)
CSS3で作るマウスオーバーアニメーション
背景色が変化するアニメーション
<!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; } .content { margin: 100px; } h1 { margin-bottom: 20px; font-size: 20px; color: #666; } li { float: left; } li>a { display: block; width: 160px; background-color: #fff; float: left; line-height: 40px; text-align: center; color: #333; border: 1px solid #999; border-left: 0; box-sizing: border-box; background: #FFF; transition: all 1s ease; } li:first-child>a { border-left: 1px solid #999; } #nav>li>a:hover { background: #DDA32F; color: #FFF; } </style> </head> <body> <div class="content"> <h1>背景色が変化するアニメーション</h1> <ul id="nav"> <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> </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; } .content { margin: 100px; } h1 { margin-bottom: 20px; font-size: 20px; color: #666; } ul { overflow: hidden; } .c1>a { background-color: #FF9933; } .c2>a { background-color: #00CCFF; } .c3>a { background-color: #33CC66; } .c4>a { background-color: #FF84D7; } #nav { margin-left: -20px; } #nav>li { margin-bottom: 10px; } #nav>li>a { display: block; width: 260px; margin-left: -100px; padding-right: 30px; line-height: 30px; font-weight: bold; color: #FFF; text-align: right; -webkit-border-top-right-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-radius-topright: 30px; -moz-border-radius-bottomright: 30px; -o-border-radius-topright: 30px; -o-border-radius-bottomright: 30px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #nav>li>a:hover { margin-left: 0; } </style> </head> <body> <div class="content"> <h1>横からスライドするアニメーション</h1> <ul id="nav"> <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>
拡大・縮小するアニメーション
<!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; } .content { margin: 100px; } h1 { margin-bottom: 20px; font-size: 20px; color: #666; } .c1>a { background-color: #FF9933; } .c2>a { background-color: #00CCFF; } .c3>a { background-color: #33CC66; } .c4>a { background-color: #FF84D7; } #nav>li { float: left; margin-right: 30px; text-align: center; transition: all 0.5s ease; } #nav>li:hover { transform: scale( 1.5 ); } #nav>li>a { display: table-cell; width: 100px; height: 100px; line-height: 100px; text-align: center; border-radius: 50%; font-weight: bold; color: #FFF; } </style> </head> <body> <div class="content"> <h1>拡大・縮小するアニメーション</h1> <ul id="nav"> <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>