宣武公司网站开发:在响应式Web设计中使用CSS转换

2019.05.27 宣武公司网站开发

131

带着响应式网页设计(RWD)当我们调整浏览器窗口的大小时,我们的设计在遇到每个断点时随意地在屏幕上移动。这对普通用户来说不是问题,大多数人通常不会坐在自己的电脑前,以上百种不同的方式调整浏览器的大小。如果我们的设计能轻柔优雅地放好位置,那岂不更好。输入CSS转换。

CSS转换是为您的响应网站添加一些风味的好方法。元素,如文本和/或图像,在调整浏览器大小时平稳地重新定位。虽然这个特性可能经常被忽略,但它确实很容易实现,而且看起来比突然重新定位文本或图像要好得多。

看看这个演示。

这里是宣武公司网站开发如何让它在你的网站上工作。在这种情况下,我们将平稳地动画一些文本,这将调整大小时,浏览器达到一个特定的断点。

首先,将此样式应用于您的文本。确保使用适当的供应商前缀。这将转换文本的大小,使用“轻松地-在-出”的动画。

body {
   	font-size:11em;
   	transition:all .5s ease-in-out; 
   	-o-transition:all .5s ease-in-out; 
   	-moz-transition:all .5s ease-in-out; 
   	-webkit-transition:all .5s ease-in-out;
}

在上面的CSS中,我们告诉身体内的样式转换所有的样式。这意味着在下面的媒体查询中发生变化的每一种样式都将发生变化。.5s是过渡的时间长度,而轻松进入是过渡的类型.

现在,在媒体查询中,将字体设置为不同的大小。根据您的设计,此大小将有所不同。

@media screen and (max-width:500px) {
body {
    	font-size:8em;
  	}
}

每次您设置不同的媒体查询断点,并更改字体大小的“正文”文本,它将顺利过渡。

这也将适用于颜色和不透明度。下面的示例将字体颜色从黑色转换为红色。

body {
   	font-size:11em;
    color:#000;
   	transition:all .5s ease-in-out; 
   	-o-transition:all .5s ease-in-out; 
   	-moz-transition:all .5s ease-in-out; 
   	-webkit-transition:all .5s ease-in-out;
}

@media screen and (max-width:500px) {
body {
    	font-size:8em;
        color:#ff0000;
  }
}

查看演示,并查看源代码,宣武公司网站开发以了解更多在RWD中使用CSS转换的方法。


寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP