现代 CSS

breadcrumb

CSS制作面包屑

CSS制作面包屑

面包屑是Web中常见的一个元件,早前在《CSS3制作Breadcrumbs》和案例《css3面包屑设计》使用CSS3制作了各式各样的面包屑效果,今天@逆天使用上原始的CSS配合一定的标签制作了一款兼容多浏览器的面包屑案例,感兴趣的可以看看:

藤藤每日一练——CSS3 Animation Breadcrumbs

藤藤每日一练——CSS3 Animation Breadcrumbs

Breadcrumbs(面包屑),在网站上也是常见的一种UI效果,但这种效果大家看到的都是很普通普通的效果,使用CSS3制作的一些特殊效果,可能很少见吧。虽然早前在《CSS 制作Breadcrumbs》一文中搜集和制作了一些效果,但这些效果都没有运用动画效果。今天这个案例使用CSS3的几个属性制作了一个带有动画的Breadcrumbs效果,感兴趣的可以看看。

css3面包屑设计

css3面包屑设计
这里总共有四种面包屑效果,其中第一种运用:before和:after,运用border生成同等大小的尖角,叠加起来左右错动1px;第二个还是运用:before和:after,运用border生成不同的尖角,一个在左一个在右;第三个是运用一个:after生成一个正方形,设置border-radius然后rotate旋转45度;第四个直接运用水平扭曲就skewX就可以了。
返回顶部