我正在做一个元素,让人们在打开浏览器窗口或新标签时显示一个新的浏览器主页。此页面将包含流行网站的图标/图 block ,有时还会包含他们自己的定制网站。
我想要做的是让图 block 看起来像 Windows 8 的图 block ,并具有翻转和缩放到全屏的效果,就像在真正的 Windows 8 开始屏幕上单击它时那样,它将显示图标和页面加载时的网站标题。
我不打算将网站加载到主页中,因为这会将他们引导至正在点击的网站,但在他们到达该网站之前,它会在屏幕上显示图标和网站标题。
关于如何实现这一目标的任何建议以及一些示例都很棒。
提前感谢您的宝贵时间,期待您的回复。
最佳答案
如果您想要全屏特定样式,可以使用伪类。 https://developer.mozilla.org/es/docs/Web/CSS/:fullscreen
我认为您的大部分问题将是:选择网格 系统或布局这些图 block 的技术。缩放和翻转效果应该使用 transform
属性来完成。
检查我发现的内容:http://metroui.org.ua/tiles.html (带有 win8 组件的风格指南)
这是令人惊叹的 Sara Soueidan 的另一个示例:sarasoueidan。 com/demos/windows8-animations(无法粘贴链接,因为我的声誉点数太低)
如果您需要 JS 或只想实现跨浏览器兼容性,请查看此库。太棒了:GSAP
专业提示:这将成为您的 friend :backface-visibility: hidden;
关于javascript - 网站的 Windows 8 风格开始屏幕磁贴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41212709/