龙空技术网

纯CSS图片“花样”悬停效果

前端似锦 274

前言:

如今各位老铁们对“css悬浮顶部”可能比较注意,同学们都想要剖析一些“css悬浮顶部”的相关资讯。那么小编在网络上网罗了一些对于“css悬浮顶部””的相关内容,希望大家能喜欢,小伙伴们快快来学习一下吧!

原理:

鼠标悬停的效果:从中心点扩大到整个圆,先让范围缩小为0(transform: scale(0);,当鼠标放在上面时就放大1倍(transform: scale(1);),过程花0.35秒。

效果图:

CSS代码:

HTML代码:

标签: #css悬浮顶部