用CSS3做个炫酷的图标hover3D效果

来分享个图标效果,康康效果
用CSS3做个炫酷的图标hover3D效果_第1张图片
相当炫酷的3D效果,原作者是油管上的CodingNepat.

准备知识:
该案例主要运用了css3的transform属性,和神奇的想法。

1、先来搭建HTML骨架
用CSS3做个炫酷的图标hover3D效果_第2张图片
这里就只展示一个图标的结构,其他两个都是一样的,还有记得引入font-awesome哦

2、写下这三个图标的基本样式
用CSS3做个炫酷的图标hover3D效果_第3张图片
这里让图标在整个屏幕的居中,这里的hover效果是整个图标的,可以感受下,是怎么变化的。

3、接下来就是体现3d效果的了
用CSS3做个炫酷的图标hover3D效果_第4张图片
给每个i都加个边框
用CSS3做个炫酷的图标hover3D效果_第5张图片
再来利用transform让他向右上方移动一点,透明度递增,这里的hover可以先不加,这样可以看的清楚些。
用CSS3做个炫酷的图标hover3D效果_第6张图片
给每个图标对应的颜色,

用CSS3做个炫酷的图标hover3D效果_第7张图片再来一点阴影,效果更好。

用CSS3做个炫酷的图标hover3D效果_第8张图片
在处理下文字的效果。

用CSS3做个炫酷的图标hover3D效果_第9张图片
做完上面的操作,你就能得到这样的效果了,这已经和效果图相差不远了,最后就是把之前的hover加上去了,这样就大功告成了。
这简直就是操作简单,效果爆炸,这案例里的倾斜加旋转,还有就是边框的布局位置是灵魂所在。

————纵然是在巨人的肩膀上学习……

你可能感兴趣的:(用CSS3做个炫酷的图标hover3D效果)