javascript - 网站的 Windows 8 风格开始屏幕磁贴

标签 javascript jquery html css windows-8

我正在做一个元素,让人们在打开浏览器窗口或新标签时显示一个新的浏览器主页。此页面将包含流行网站的图标/图 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/

相关文章:

javascript - 此代码在片段中有效,但在博客中无效

javascript - FileSystemHandle.requestPermission DOMException : User activation is required to request permissions

javascript - 如何使用正则表达式查找两个指定字符之间的文本

javascript - jquery 检测文件更改并显示它

html - 如何动态打破 FlexBox 列以开始新列

javascript - 传递一个带有参数的函数

javascript - 使用 TypeScript 的延迟 javascript/jQuery 搜索不等待

javascript - 使用 jQuery 关闭辅助导航菜单

ASP.NET 如何在提交时禁用按钮?

html - 在 matlab 中读/写在线 .wav 文件?