首页 > 开发 > CSS > 正文

使用JS配合CSS实现Windows Phone中的磁贴效果

2024-07-11 08:55:09
字体:
来源:转载
供稿:网友

Windows Phone的tile设计的美丽对我来说有余音绕梁的效果。我从来不知道优雅的方块盒子布局能给我深刻的印象。因此我尝试在web里用CSS和Jquery去实现这种tile设计。我已尝试Tile Flip动画效果,它能展示两种不同的信息一个在tile的前端而另外一个就在后端。 

Demo Download
201571182711748.png (520×271)

首先我们要为tile创建和下面图片的效果一样的HTML的内容。每个tile包含了两个分别在前后的div。他们都能包含要展示的信息。下面的html代码生成所需的tile布局。
201571182734002.png (248×249)

tile设计包含了CSS的类名

CSS Code复制内容到剪贴板
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表