Vue按钮放大代码示例:使用CSS transform 实现按钮悬停放大效果
<template>
<button class='btn'>点击按钮</button>
</template>
<style>
.btn {
transition: transform 0.3s; /* 添加过渡效果 */
}
.btn:hover {
transform: scale(1.2); /* 鼠标悬停时将按钮放大到原来的1.2倍 */
}
</style>
<p>以上代码中,使用了:hover伪类选择器来实现当鼠标悬停在按钮上时应用变大的样式。通过设置transform的scale属性为1.2,可以将按钮放大到原来的1.2倍。使用transition属性来添加过渡效果,使按钮变化更加平滑。'}</p>
原文地址: https://www.cveoy.top/t/topic/pBD4 著作权归作者所有。请勿转载和采集!