作成方法:ホバー時に拡大
CSSを使ってホバー時に要素を拡大する方法を学びます。
ホバー時の拡大
緑色の枠にマウスをホバーしてください:
ホバー時の拡大
<style> .zoom { padding: 50px; background-color: green; transition: transform .2s; /* Animation */ width: 200px; height: 200px; margin: 0 auto; } .zoom:hover { transform: scale(1.5); /* (150% zoom - 注意:如果缩放过大,它将超出视口范围) */ } </style> <div class="zoom"></div>
関連ページ
チュートリアル:CSS変換