CSS3中的移入放大可以让网页元素在鼠标移入时自动放大,增加网页的互动性和视觉效果。
div:hover { transform: scale(1.2); }
其中,div:hover
表示鼠标移入时,作用于div元素。使用transform: scale(1.2);
将元素放大到原来的1.2倍大小。
还可以加入过渡效果,让元素平滑放大或缩小:
div { transition: transform 0.3s ease-in-out; } div:hover { transform: scale(1.2); }
在div元素中使用transition: transform 0.3s ease-in-out;
属性,使得放大或缩小操作平滑进行。其中,0.3s
表示过渡时间为0.3秒,ease-in-out
表示缓动函数。
除了放大,还可以通过CSS3移入效果实现许多其他有趣的效果,如旋转、翻转、渐变等。