1. 首页
  2. css

CSS动画媒体查询

如果对某个特定支持的属性的元素应用转换,并且该属性曾经更改过,则它将使用该转换。如果该元素上的类名更改,而新类更改了该属性,则它将转换(假设该类所做的不是删除转换)。如果JavaScript真的改变了这个样式属性,它就会转换。

同样,如果新的媒体查询生效,并且该媒体查询中的某些内容更改了该元素的属性,则该查询将转换。因此,当一个新的媒体查询开始影响页面时,实际上并没有\”动画媒体查询\”这样的东西,而是有一些元素会像预期的那样进行转换。

简单示例

.thing-that-moves {position: absolute;width: 100px;height: 100px;background: red;top: 0;left: 0;transition: left 0.5s; /* BYO prefixes */}@media (min-width: 400px) {left: 50px;}@media (min-width: 600px) {left: 100px;}

如果您要跨这些断点调整浏览器窗口的大小,你会看到一个红色的方块在响应中移动。

稍微复杂一些的布局示例

几个版本以前,在CSS技巧上,我有一个搜索表单,它会使用这种精确的技术慢慢地浮动到位。我在这里用一个简单的布局重现了它,在这种情况下,其他一些事情也会发生转变:

您可能会很幸运地在全页视图中查看它。

它的动画GIF工作:

<p.s.LICEcap对于创建这样的GIF非常有用。

我还能做什么?

天空是这里的极限。它只是CSS。改变和过渡你想要的。在另一个版本的CSS技巧中,我用简单的CSS形状从树屋中画出了青蛙迈克。当遇到不同的媒体查询时,迈克会改变形状、颜色、表情和位置——通过转换慢慢地进入下一个状态。很受欢迎!

什么是浏览器支持?

IE 9+上的媒体查询。即10+的过渡。我不会为这些转变而发愁,因为它们只是严格意义上的功能性转变(如果它们不转变,那没关系,它们仍然在移动)。如果您需要更深入的媒体查询支持,那么回复.js有什么真正的理由这样做吗?

大便和咯咯笑,哟。这纯粹是为了好玩。它可以是一个小触摸只是给你的网站一些精神。做一个商业案例是很难的,但是如果你的绩效预算没有足够的资金,我会为你感到难过的,儿子。有什么需要注意的吗?

如果样式表的解析速度足够快,并且在页面仍在布局时将转换应用于元素,那么这些转换可能会有点令人讨厌。您可能只想在页面加载后应用它们

CSS动画媒体查询 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%8a%a8%e7%94%bb%e5%aa%92%e4%bd%93%e6%9f%a5%e8%af%a2/

发表评论

您的电子邮箱地址不会被公开。