妙用伪对象实现3D立方体

2019/7/22 11:15:47 人评论 次浏览 分类:学习教程

妙用伪对象实现3D立方体前几天发表了2篇关于“3D立方体”的制作方法,两种方法都各有不同。一种是用6个div,效果更加逼真,但不兼容ie;一种是仅用了5个div,利用边框来构造立方体,兼容性更好。今天再来介绍第三种方法,即:妙用伪对象实现3D立方体。

虽然说现在很多网站中都用了伪对象,但如实说,洒家在日常并没有怎么用过伪对象。原因是考虑到要兼容坑爹的ie6,其实我真的很想不明白,到底是哪些神人还在用破ie6。不过话又说回来,写网页考虑兼容ie6还是有好处的,起码可以规范我们的代码,以及我们可以掌握更多的兼容性问题。一般在网页中,洒家喜欢使用css3中的过渡效果,虽然在低版本ie中不支持,但可以使用jq。好了,还是来看看伪对象是如何实现的吧,附源码:

妙用伪对象实现3D立方体---艺灵设计,qq群:231749938
d1
d3
上述源码的效果图如下,

怎么样,是不是很神奇。查看源码可以发现只用了“2”个div,你惊呆了吗?这就是伪对象的强大功能。伪对象可以帮我们省去很多代码,当然缺点就是不兼容低版本ie了。
东莞网站建设www.zg886.cn

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->