关于"CSS3案例集"的文章

3D正方体转圈圈,有点催眠!

3D正方体转圈圈,有点催眠!
网页上大部分的transform都是2D的变换,不过3D变形的确更酷炫一些,如果想啃一下这个知识点,可以移步到教程区:transform中的3D变化,你的眼睛真好骗!这里分享一个比较经典的3D正方体效...

强迫flex实现二维布局并且每行个数不一样的痛苦!

强迫flex实现二维布局并且每行个数不一样的痛苦!
flex是一维一维一维布局的设计,grid才是二维二维布局的解决方案。但是,flex又提供了flex-wrap这个属性,所以也允许折行显示。但是如果每一行的显示个数不一样的时候,再把对齐和分布等属性用...

flex布局中的order属性最适合的应用场景

flex布局中的order属性最适合的应用场景
order属性可以在不改变html元素结构的情况下,改变元素在页面中渲染的顺序。对于需要交错式排版的场景是最好不过了。比如下面这种交错式时间轴,就可以利用order结合nth-child选择器完美实现...

还记得温家宝总理的《仰望星空》吗?

还记得温家宝总理的《仰望星空》吗?
不知道哪个时候记得的这首小诗,只觉得那时候以为自己会永远年轻,永远热泪盈眶,明天永远会更好,不管遇到什么,未来永远值得期待……,那真是美好的时代。用渐变结合无缝滚动动画,做了一个小案例,很早以前做的,...

爆裂的小爱心,为你的爱豆点赞!

爆裂的小爱心,为你的爱豆点赞!
翻到一个小案例,是当时做逐帧动画练习的时候随手完成的。不过这个小案例还是有点点用,有什么用?就是看到自己曾经喜欢过的明星的脸时还有那么一丝丝悸动,哈哈……点击图片看效果,为你喜欢的爱豆点个赞,就可以看...

小球弹跳理解三种animation动画形式

小球弹跳理解三种animation动画形式
animation动画非常强大,快速掌握它多亏以前做过两年的flash开发,回想起十多年前用flash做动画的时候,曾经也有一个闪客梦,说这些话只能证明我老了!!点击查看具体效果。别小看这三个弹跳的小...

media queries响应式完成导航菜单的切换

media queries响应式完成导航菜单的切换
预算有限的公司,网站内容不太多的公司,都可以通过响应式实现一套代码覆盖PC到移动端,这也算是互联网从PC过渡到移动端的产物吧。现在绝大部分页面都在移动端了,PC端的项目更多的是与专业工作技能有关的,与...

steps animation,极光下奔跑的熊!

steps animation,极光下奔跑的熊!
有次无意间看到了百度浏览器的动画效果,一直恋恋不忘,终于抽了点空仿了一个场景,感觉steps animation逐帧动画还是很强大呀。点击查看效果一、案例分析1、星空背景的运动和三层山的运动需要掌握背...

仿腾讯专题页,实现3D旋转效果

仿腾讯专题页,实现3D旋转效果
这个专题页我挺喜欢的,就在上课的时候简单的仿制了一下,不过没有设置video和图片的切换,直接用了图片,算是阉割版了。下面的3D旋转使用了不同的方式,把图片也包括进去了,原始版本是只有边框旋转,图片不...

CSS3案例集12:响应式布局初体验!(更新移动端导航菜单)

CSS3案例集12:响应式布局初体验!(更新移动端导航菜单)
一个月的ps基础课程教学终于结束,网站也好久没有更新了,今天学生们准备项目汇报的作品,我忙里偷闲赶紧来更新一下。响应式布局几乎是现在网页设计的标配,能在不同的屏幕宽度下显示不同的效果,而不用准备不同的...
Top