缩放响应动画

标签: css  java  python  html  面试

扩展我们的网站和应用程序,以使其在每个屏幕上看起来都很漂亮可能很困难。 这种困难的很大一部分可能是试图获得特定的组件,尤其是那些必须保持一定大小(例如动画)的作品,以便无论屏幕大小如何都看起来不错。 在本文中,我们将介绍如何帮助使响应式动画保持所需大小的大小。

在介绍特定技术之前,我们需要牢记一些基本准则:

缩放响应动画的准则

1.根据容器调整动画大小

无论我们使用的是自适应缩放还是自适应缩放(请参见下文),我们都应尝试根据容器的大小调整动画大小。 在响应式缩放中,这非常简单,但是在自适应缩放中,我们必须关注元素(容器)查询 唯一的例外是,如果我们知道在每种情况下元素都将相对于视口进行定位和调整大小。 即便如此,明智的做法是根据容器确定每个零件的尺寸,以防我们以后改变主意。

有时候,我已经完全按照我只想意识到它仅适用于特定屏幕尺寸的方式完成了动画的抛光。 那段时间包括犯下一些错误,例如使用绝对单位 (如px ), 仅在一个屏幕尺寸上查看它使用响应单位但无法检查极端尺寸 ,以及其他两次不得不回头完全重构方法的场合。 相对于父元素调整动画大小有助于防止这种情况的发生,以下几点也可以:

2.了解使用它的环境

动画将是在应用程序的多个部分中重复的模块吗? 最初它仅用于页面加载器吗? 是否需要扩展? 牢记这一点可以帮助确定缩放动画的方法,并避免浪费您的精力。


现在,让我们看一下缩放动画的三种最重要的方法:以响应单位进行缩放,比例缩放和自适应缩放。

响应单元扩展

根据父项调整大小

当我们使用%em类的响应单位时,动画会根据父级自动调整其大小,因为它们的值会随着父级的变化而变化。

  • 如果是百分比,则子级的宽度值由该属性的父级值乘以该子级上设置的百分比值来设置。
  • 对于em s,它将查看父级的font-size ,该font-size决定孩子的size值乘以em s的数量。

这使我们能够确保响应动画的每一部分都保留我们想要的相对于彼此的行为。

根据视口调整容器大小

从那里开始,如果我们相对于视口调整容器的大小,那么响应片段也将最终根据视口调整自身大小。

我们可以根据视口使用百分比来设置容器的大小,但这通常需要设置类似html, body { height: 100%; } html, body { height: 100%; } ,并确保相对于主体调整父对象的大小,这对于嵌套而言并非总是如此。 添加此新规则也会影响其他样式更改。

另外,我们可以使用视口单位 ,它根据视口大小调整容器的大小,而不管其嵌套的深度。 要记住的一件事是, 对视口单位的支持并不是完美的,尽管绝对处于可以用于大多数项目的状态。

当它是一个非常简单的动画(例如这种幻觉)时,我倾向于仅将响应单元用作动画的标量。 大多数情况下,它需要使用从下方采用的方法来对响应单元进行配对,以使动画保持比例。

比例缩放

我们可以通过三种主要方法在缩放比例时使响应动画保持比例。

1.尺寸根据宽度

为了使元素的大小基于容器的宽度,我们可以使用以下方法:

.container {
  height: 0;
  padding-top: 100%;
}

见笔无限山CSS扎克索西耶( @Zeaklous )上CodePen

但是,如果您要根据视口调整容器大小,则更直接的方法是像这样使用vw ,尽管在支持方面还不算太远。

2.基于高度的尺寸

我们也可以通过使用vh来根据高度调整容器的大小,如本演示中所示 ,但这是我见过的使用最少的技术。 我唯一记得自己做过类似的事情是当我使用响应单元创建此加载器时 ,但即使如此,我也没有使用容器或视口单元。

3.尺寸基于较小的尺寸

到目前为止,基于较大的尺寸调整大小是我调整响应式动画(尤其是可视化效果)的最常见方式,因为我几乎总是希望我的所有响应式动画都能完全可见。 这种方法确保了这种情况的发生。

.container {
  max-width: 100vh;
  max-height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.container::before {
  content: "";
  display: block;
  margin-top: 100%;
}

见笔袅袅点扎克索西耶( @Zeaklous )上CodePen

该技术没有利用vmax单位,因此任何支持视口单位 (回到IE9)的浏览器都可以使用它。 但是,它确实使用了一个伪元素(除非您想使用真实元素),这一点应牢记。

如果要在视口本身上缩放容器并且可以使用视口单位,则根据较大的尺寸来调整大小非常简单。 所有你需要的是:

.container {
  width: 100vmin;
  height: 100vmin;
}
这是一个演示

当相对于视口调整动画大小时,而不是某些较小的容器时, 可以使用此方法。

自适应缩放

自适应缩放在特定断点的变化之间切换。 请参阅Geoff GrahamCSS-Tricks 文章,了解响应缩放和自适应缩放之间的区别

有时,我们可能希望至少部分响应式动画更改它们在特定屏幕尺寸下的尺寸设置方式。 这通常在使用文本或细线时完成,尽管有时在许多复杂的事物变得较小时也很适用。 徽标可能是最常用的元素,因为它们需要精确。

有没有人做的东西自适应的方式,但我接近它以同样的方式我做响应式设计:通过扩大我的动画,直到事情开始看起来很丑,然后添加一个断点修复什么样子难看。

有时将响应片段与自适应片段混合在一起是适当的,例如下面的钢笔中。 顶部是响应式的,但是文本是自适应的,以防止在字体大小介于中间的情况下文本缩放变得难看。

CodePen查看 Zach Saucier( @Zeaklous )的笔突破

关于SVG的说明

SVG可以利用上面概述的任何方法。 最常见的是,我将SVG像模块化动画一样对待,并确保SVG由SVG元素本身确定大小,如上所述,通常将其作为基于较大尺寸的容器来对待。 通过这种方式,它利用了SVG的向量性质,使其可以缩放到所需的大小。

有关如何具体缩放SVG的更多信息,请查看CSS-Tricks上有关Amelia Bellay-Royds的有关缩放SVG组件的文章,或参阅Sara Soueidan的Codrops有关使SVG响应的文章

使它在所有情况下看起来都很棒

经过一点规划,动画在小尺寸下的效果也一样好。 不要使用像素单位,并确保每个宽度,高度和距离值都是基于一个或两个基于容器/视口尺寸或字体大小的变量定义的。

翻译自: https://css-tricks.com/scaling-responsive-animations/

版权声明:本文为cunqu9743原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cunqu9743/article/details/106999043

智能推荐

【Sublime】使用 Sublime 工具时运行python文件

使用 Sublime 工具时报Decode error - output not utf-8解决办法   在菜单中tools中第四项编译系统 内最后一项增添新的编译系统 自动新建 Python.sublime-build文件,并添加"encoding":"cp936"这一行,保存即可 使用python2 则注释encoding改为utf-8 ctr...

java乐观锁和悲观锁最底层的实现

1. CAS实现的乐观锁 CAS(Compare And Swap 比较并且替换)是乐观锁的一种实现方式,是一种轻量级锁,JUC 中很多工具类的实现就是基于 CAS 的,也可以理解为自旋锁 JUC是指import java.util.concurrent下面的包, 比如:import java.util.concurrent.atomic.AtomicInteger; 最终实现是汇编指令:lock...

Python 中各种imread函数的区别与联系

  原博客:https://blog.csdn.net/renelian1572/article/details/78761278 最近一直在用python做图像处理相关的东西,被各种imread函数搞得很头疼,因此今天决定将这些imread总结一下,以免以后因此犯些愚蠢的错误。如果你正好也对此感到困惑可以看下这篇总结。当然,要了解具体的细节,还是应该 read the fuc...

用栈判断一个字符串是否平衡

注: (1)本文定义:左符号:‘(’、‘[’、‘{’…… 右符号:‘)’、‘]’、‘}’……. (2)所谓的字符串的符号平衡,是指字符串中的左符号与右符号对应且相等,如字符串中的如‘(&r...

JAVA环境变量配置

位置 计算机->属性->高级系统设置->环境变量 方式一 用户变量新建path 系统变量新建classpath 方式二 系统变量 新建JAVA_HOME,值为JDK路径 编辑path,前加 方式三 用户变量新建JAVA_HOME 此路径含lib、bin、jre等文件夹。后运行tomcat,eclipse等需此变量,故最好设。 用户变量编辑Path,前加 系统可在任何路径识别jav...

猜你喜欢

常用的伪类选择器

CSS选择器众多 CSS选择器及权重计算 最常用的莫过于类选择器,其它的相对用的就不会那么多了,当然属性选择器和为类选择器用的也会比较多,这里我们就常用的伪类选择器来讲一讲。 什么是伪类选择器? CSS伪类是用来添加一些选择器的特殊效果。 常用的为类选择器 状态伪类 我们中最常见的为类选择器就是a标签(链接)上的为类选择器。 当我们使用它们的时候,需要遵循一定的顺序问题,否则将可能出现bug 注意...

ButterKnife的使用介绍及原理探究(六)

前面分析了ButterKnife的源码,了解其实现原理,那么就将原理运用于实践吧。 github地址:       点击打开链接 一、自定义注解 这里为了便于理解,只提供BindView注解。 二、添加注解处理器 添加ViewInjectProcessor注解处理器,看代码, 这里分别实现了init、getSupportedAnnotationTypes、g...

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。考试复习题库1|要求:只能使用单字符比较操作。

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。 要求只能使用单字符比较操作。 参考代码: 实验结果截图:...

小demo:slideDown()实现二级菜单栏下拉效果

效果如下,鼠标经过显示隐藏的二级菜单栏 但是这样的时候会存在一个问题,就是鼠标快速不停移入移出会导致二级菜单栏闪屏现象,一般需要使用stop()来清除事件  ...

基于docker环境的mysql主从复制

1、安装docker 可以参考之前的博客,之前写过了~ 2、拉取mysql镜像 3、创建mysql01和mysql02实例 主: 从: 4、进入容器修改配置 1)修改主数据库配置 进入主数据库容器 切换到 etc/mysql/目录下 查看可以看到my.cnf文件,使用vim编辑器打开,但是需要提前安装 安装vim命令: 安装成功后,修改my.cnf文件 新增配置后的my.cnf: binlog 日...