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

2021-01-20 17:47 jianzhan

原文详细地址: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些与本实例教程不相干的款式我省去了。要做出甚么酷炫的款式、请你自身界定哦。

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