.box { width: 200px; height: 200px; background-color: #ccc; transition: transform 0.3s ease; } .box:hover { transform: scale(1.2); }
以上代码中,使用了 CSS 的 transition 属性来描述网站元素的动态变化。在本例中,大家使用了缩放值,即 transform 属性。这个属性可以改变元素的大小、形状或者位置。
在:hover 伪类中,大家增加了缩放值为 1.2。当鼠标指向指定元素时, 缓缓放大效果会缓缓地出现,然后又缓缓地消失。 它使用户感到这是一件活生生的事情,而不是一只呆板的网站。
值得注意的是,大家正在使用 “ease” 来描述过渡的时间。这个属性使得过渡看起来很自然,通过让变化相对平稳来达到效果。在其他情况下, 使用 “linear” or “ease-in-out” 可帮助你更好地在各种情况下调整你的代码。