CSS完成电脑鼠标挪动到照片或按钮上更改尺寸的

原文详细地址：https://vien.tech/article/154

CSS完成电脑鼠标挪动到照片或按钮上迟缓增大，加上过渡动漫实际效果，自定动漫時间。电脑鼠标指向元素，元素增大CSS示例。

实际效果示例

这里是1个实际效果示例： https://findcatsname.com/cats-do-know-their-own-names

大家能够看到网页页面顶部和底部都有共享的按钮。随后我把电脑鼠标挪动到在其中1个按钮上：

能够看到，正中间的按钮增大了。自然，照片看不派出画实际效果，大伙儿能够自身去站点查询（好吧，我认可，这是我的站，想骗你进去，哈哈）。

完成编码

接下来大家就来用css完成这个款式

这是3个按钮

<button class="btn-share">Twitter</button>
<button class="btn-share">Pinterest</button>
<button class="btn-share" >Facebook</button>

这是css款式：

.btn-share {
  transition: all 0.3s;
}

.btn-share:hover {
  transform: scale(1.3);
}

transition 界定的是过渡动漫实际效果時间， transform 界定的是变大的倍数。而 :hover 则界定电脑鼠标滑过恶性事件。

自然，你会发现，这些编码跟展现的示例不1样。不必担忧、由于1些与本实例教程不相干的款式我省去了。要做出甚么酷炫的款式、请你自身界定哦。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。