带有转换和translateY的Safari bug：“jumping”元素 - 腾讯云开发者社区

文章/答案/技术大牛

发布

伪元素动画和转换的例子

一些创造性的实验使用伪元素上的动画和转换来创建有趣的效果。今天，我们将尝试动画和伪元素（：之前和之后）的转换，我们将发现它们的潜力。...我们将讨论一下关于动画伪元素的一些问题，并看看四个使用一些特殊技术来实现各种效果的例子。我们首先来看看使用动画和转换以及伪元素的优点和缺点。...很明显，还有其他方法可以达到相同的视觉效果，但是为了这个实验，我们当然会使用伪元素，所以要注意，它只能在支持动画和转换的浏览器中使用。...我们将使用动画和转换。我们将使用一个元素的生物的眼睛。在悬停我们激活翅膀动画和身体明星提升。这是最后一个例子！...总之，伪元素是一件好事，将它们与动画和转换相结合，可以创建一些有趣的效果，而不需要使用太多的标记或图像。更广泛的浏览器支持有望很快推出; 在那之前我们可以玩它，发现有趣和有趣的技术。

1.7K5 0

CSS3的3D变换和动画

CSS3的3D变换 transform属性 attr des css level transform 向元素应用 2D 或 3D 转换。...3 transform-origin 允许你改变被转换元素的位置。 3 transform-style 规定被嵌套元素如何在 3D 空间中显示。...3 perspective 规定 3D 元素的透视效果。 3 perspective-origin 规定 3D 元素的底部位置。...3 @transfrom兼容性 IE10，firefox以及Opera支持@keyframe，而chrome和safari需要加浅醉-webkit-，IE9及早期IE版本是不支持的，所以这些功能一般是在移动端使用...3 @keyframe兼容性 IE10，firefox以及Opera支持@keyframe，而chrome和safari需要加浅醉-webkit-，IE9及早期IE版本是不支持的，所以这些功能一般是在移动端使用

1.9K6 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS3的3D变换和动画

2D 或 3D 转换。...3 transform-origin 允许你改变被转换元素的位置。 3 transform-style 规定被嵌套元素如何在 3D 空间中显示。...3 perspective 规定 3D 元素的透视效果。 3 perspective-origin 规定 3D 元素的底部位置。...3 @transfrom兼容性 IE10，firefox以及Opera支持@keyframe，而chrome和safari需要加浅醉-webkit-，IE9及早期IE版本是不支持的，所以这些功能一般是在移动端使用...3 @keyframe兼容性 IE10，firefox以及Opera支持@keyframe，而chrome和safari需要加浅醉-webkit-，IE9及早期IE版本是不支持的，所以这些功能一般是在移动端使用

1.5K1 1

【基础系列】CSS专题

取值： transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。...如：transform:translateY(20px): 1.2.4 缩放scale 缩放scale和移动translate是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放...(也就是X轴和Y轴同时缩放)；scaleX(x)元素仅水平方向缩放(X轴缩放)；scaleY(y)元素仅垂直方向缩放(Y轴缩放)，但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为...Chrome 和 Safari 需要前缀 -webkit-。...-webkit-overflow-scrolling带来的BUG http://www.tuicool.com/articles/U73Erq iOS8 Safari -webkit-overflow-scrolling

5712 0

CSS3 transform 属性(2D,3D旋转)

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。 Opera 只支持 2D 转换。三.属性对象表值描述 none 定义不进行转换。...translate3d(x,y,z) 定义 3D 转换。 translateX(x) 定义转换，只是用 X 轴的值。 translateY(y) 定义转换，只是用 Y 轴的值。...scaleX(x) 通过设置 X 轴的值来定义缩放转换。 scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。...skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。...skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 perspective(n) 为 3D 转换元素定义透视视图。

8041 0

CSS完成元素水平垂直居中

要求：子元素和父元素宽高不确定，需要设置子元素水平垂直居中，效果如下图： center.png 这里提供几种简单的实现方法： 1.使用margin:auto属性实现【兼容IE7以上大部分浏览器...】首先这个元素和它的父元素都要设置定位，其中这个要水平垂直居中的元素需设置绝对定位absolute，然后再给它设置样式{left: 0;right: 0;top: 0;bottom: 0;margin... .parent{ /*子元素和父元素宽高随意，都可以实现水平垂直居中，这里随便设置了一个宽高撑开盒子容器体积，方便查看效果*/ width: 600px...其中的translateX(-50%)表示将此元素在X轴上向左移50%元素宽度的距离，同理translateY(-50%)将元素在Y轴上向上移50%元素高度的距离。...(-50%); } 3.使用flex布局实现【浏览器兼容性：Safari 9+、 Chrome 29+、Firefox 28+、Opera 17+、IE10+】首先给父元素设置

1.7K1 0

【说站】CSS常用技巧的整理

CSS常用技巧的整理 1、垂直对齐，利用CSS3的Transform。如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？...: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } 使用这个技巧，从单行文本...目前浏览器对Transform的支持是需要关注的，Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9均支持该属性 2、伸展一个元素到窗口高度在具体场景中...你可能想要将一个元素伸展到窗口高度，基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度，我们需要伸展顶层元素：html和body:html, body { height: 100%...为了更容易知道链接的目标，有时你想让一些链接看起来和其它的不同。

4936 0

css实现鼠标划过图片放大或缩小

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。Opera 只支持 2D 转换。...定义和用法：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。...translate3d(x,y,z) 定义 3D 转换。 translateX(x) 定义转换，只是用 X 轴的值。 translateY(y) 定义转换，只是用 Y 轴的值。...skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。...skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 perspective(n) 为 3D 转换元素定义透视视图。

4.9K1 0

css 总结2 原

，沿着 X 和 Y 轴移动元素。...translateX(n) 定义 2D 转换，沿着 X 轴移动元素。 translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。...scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 scaleX(n) 定义 2D 缩放转换，改变元素的宽度。...scaleY(n) 定义 2D 缩放转换，改变元素的高度。...默认值为50% 50%（即观察范围的中心） transform-style :flat| preserve-3d ,默认是flat preserve-3d意思是被转换的子元素保存其3D转换（即如果是

6922 0

实现滚动时Header自动隐藏

他们两个分别用容器main-header-wrapper和sub-header-wrapper包裹，是为了防止由于header脱离文档流导致遮住正文元素。...> 查看示例使用选择器.main-header.hidden和.sub-header.hidden来选择具有hidden类名的header元素，将它们的transform属性设置为translateY...同时为元素设置transition，提供缓动效果。这样，header的显示和隐藏就实现了，接下来就是检测滚动方向。...，这是为了避免iOS设备中safari浏览器橡皮筋效果导致的误判所以为什么 safari 橡皮筋效果也会触发scroll事件啊啊啊啊啊！！！...但是在safari里可能不一致，在safari中，当地址栏收缩时，上文的公式成立；但是当地址栏是展开状态时，两者会一个相差地址栏的高度。而地址栏是否展开我没找到判断的方法。

3.1K3 0

CSS3常用转换总结

一、2D转换 translate(npx,npx) 　　相对当前元素位置移动 /* 实现div向左移动50个像素，并向下移动100个像素 */ div { transform...-ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari...translate translateX(npx) 　　相对当前元素位置沿X轴移动 translateY(npx) 　　相对当前元素位置沿Y轴移动 translateZ...(npx) 　　相对当前元素位置沿Z轴移动 translate3d(x,y,z) 3D转换之scale scaleX(n) 　　相对当前元素位置沿X轴缩放 scaleY...(n) 　　相对当前元素位置沿Y轴缩放 scaleZ(n) 　　相对当前元素位置沿Z轴缩放 scale3d(x,y,z) 3D转换之rotate rotateX(ndeg

7192 1

能让你受益匪浅的10个css使用技巧

CSS技巧大杂烩 01 Safari 中z-index的层级问题在Safari浏览器下(此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari...浏览器)，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的...出现了重叠的bug： ? 解决方法：父级，任意父级，非body级别，设置overflow:hidden可恢复和其他浏览器一样的渲染。以毒攻毒。...02 文字居中兼容正常处理文字上下居中的手段是让元素height和line-height相等，但是安卓环境下当字体大小的时候会出现居中失效的情况。...07 翘边阴影的实现利用:before和:after，加上绝对定位的性质，可以形成一个矩形，这个时候结合CSS3的倾斜属性skew和旋转属性rote。

1.9K2 0

30+有用的CSS代码片段

-webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY...给可点击元素添加手型光标 a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer...多边框元素必须是相对定位，且具有足够的padding来显示多余的边框： #borders { position:relative; z-index:1; padding:30px;...居中未知宽度的DIV元素 .content { margin: 0 auto 8px; display: table; } .content div { display...bellow*/ _display: inline; /*Target IE6 and bellow*/ } /* This example fixes the double right margin bug

6483 0

30+有用的CSS代码片段

在一篇文章中收集所有的CSS代码片段几乎是不可能的事情，但是我们这里列出了一些相对于其他的更有用的代码片段，不要被这些代码的长度所吓到，因为它们都很容易实现，并且具有良好的文档。...; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY...多边框元素必须是相对定位，且具有足够的padding来显示多余的边框： #borders { position:relative; z-index:1; padding:30px;...居中未知宽度的DIV元素 .content { margin: 0 auto 8px; display: table; } .content div { display...bellow*/ _display: inline; /*Target IE6 and bellow*/ } /* This example fixes the double right margin bug

1.1K6 0

CSS-2D-3D转换

2D 转换 transform: 转换在CSS3中可以实现元素的移动(translate)、旋转(rotate)、缩放(scale)等效果 2D 转换移动 translate: 2D移动可以改变元素在页面中的位置...，类似定位 translate的优点：不会影响其他元素位置，对行内标签没有效果 transform: translate(x,y); 或者分开写: translateX(50px); translateY...(50deg) 2D 转换中心点 transform-origin： x 和 y 用空格隔开，x y 默认转换的中心点是元素的中心点可以给x y 设置像素或者方位名词（top bottom left...right center） transform-origin: left bottom; 2D 转换之缩放 scale: 元素可以缩放，可以放大和缩小，x和y用逗号分隔 scale优势：可以设置转换中心点缩放...，默认以中心点缩放，而且不影响其他盒子 transform:scale(x,y); 只写一个参数，第二个数和第一个数一样，相当于 scale(2,2) 2D 转换综合写法: 顺序会影转换效果，如果有位移和其他属性的时候

7261 0

滚动跳跃：CodeBuddy 一句话生成的极限反应小游戏

✅简洁UI：干净的背景、小巧的角色、流畅的动画，清晰易懂，看着就想点开玩一局。...transition:transform0.1s;}.player-running{animation:run0.4sinfinitealternate;}@keyframesrun{0%{transform:translateY...(0);}100%{transform:translateY(-5px);}}.player-jumping{animation:none;}.ground{position:absolute;width...开始游戏//游戏元素constgameContainer...playerVelocityY=jumpStrength;player.classList.remove('player-running');player.classList.add('player-jumping

2201 0

css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。

transition-duration ： [, ]* 　　　　　　　　transition-duration 是用来指定元素，转换过程的持续时间取值：为数值...　　　　　　有元素，包括:before和:after伪元素。...X轴和Y轴同时移动）；　　　　　　translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动） 3.缩放scale 　　　　　　缩放scale和移动...scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，　　　　　　缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。...就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素, 6.改变元素的基点 transform-origin 　　　　　　他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置

1.9K10 0

css笔记 - transform学习笔记(二)

transform转换 CSS transform 属于2D/3D上的转换、变形效果。他不是一个动画，他就是变形。比如正方形变平行四边形，再变圆形。都是形状变成另一个形状。...原理是：改变元素的尺寸、形状、角度、位置等 js写法： object.style.transform="rotate(7deg)"; transform-origin 设置元素的基点位置该元素允许改变被转换元素的位置...3D translate3d(x,y,z) 3d三点位移同上 2 translateX(x) 只是用 X 轴的值位移同上 2 translateY(y) 只是用 Y 轴的值位移同上 3D...n,n,n,n,n,n,n,n,n,n,n,n,n,n) 矩阵，模型同上 16个值,4x4矩阵 perspective 规定3D元素的透视效果张鑫旭讲解文章 perspective(n) 为3D转换元素设置透视视图...规定3D元素的透视效果目前浏览器都不支持，只有safari和chrome用替代元素-webkit-perspective 只影响有3d转换属性的子元素，是加在父元素身上的。

1.9K1 0

如何使用 TensorFlow.js 自动化 Chrome 恐龙游戏？

图中每个连接都带有权重和偏执项，优化这些参数得到需要的结果称为学习。 ?...首先我们需要模拟Chrome的自带的恐龙游戏（我们可以在GitHub中找到）。本例中我们用到一个开源库，里面带有Chrome恐龙游戏的完整代码。我们对代码进行了格式化，使代码可读性更好。.../game'; 接下来初始化runner类的实例为null。 let runner = null; 这里写一个setup函数，当所有DOM元素加载后，该函数将会被调用。...handleRunning方法接收恐龙和状态作为参数。这里的状态是当前Runner的状态 — 里面包含与下一个障碍物的距离、其宽度和游戏速度。返回一个Promise对象，后续会回调恐龙执行的动作。...接下来调用 tf.tensor2d 方法将数组转换成 tensor，然后用它来执行predict方法。 if (!

1.6K3 0

疑难杂症：运用 transform 导致文本模糊的现象探究

(-50%); // ... } 由于元素的高度为 475px，translateY(-50%) 等于 237.5px，非整数，才导致了内部的字体模糊。...这里有个简单的示意：还是上述的例子，当高度从 477px 一直调整到 469px 的过程中，只有 477px 和 475px 导致了模糊，而 473, 471, 469 则没有。...设备像素比描述的是未缩放状态下，物理像素和设备独立像素的初始比例关系。并非所有浏览器都是这个表现，基本发生在 chromium 内核。为何发生这种现象呢？那么，为何会发生这种现象？...针对这个问题，没有找到特别官方的回答，普遍的认为是因为：由于浏览器将图层拆分到 GPU 以进行 3D 转换，而非整数的像素偏移，使得 Chrome 在字体渲染的时候，不是那么的精确。...保证运用了 transform: translate() 或者 transform: scale() 的元素的高宽为偶数如果你赋予给元素的 transform 的值非常明确，譬如我上文例子中的利用其来对元素进行水平垂直居中

3K2 0

点击加载更多

伪元素动画和转换的例子

CSS3的3D变换和动画

CSS3的3D变换和动画

【基础系列】CSS专题

CSS3 transform 属性(2D,3D旋转)

CSS完成元素水平垂直居中

【说站】CSS常用技巧的整理

css实现鼠标划过图片放大或缩小

css 总结2 原

实现滚动时Header自动隐藏

CSS3常用转换总结

能让你受益匪浅的10个css使用技巧

30+有用的CSS代码片段

30+有用的CSS代码片段

CSS-2D-3D转换

滚动跳跃：CodeBuddy 一句话生成的极限反应小游戏

css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。

css笔记 - transform学习笔记(二)

如何使用 TensorFlow.js 自动化 Chrome 恐龙游戏？

疑难杂症：运用 transform 导致文本模糊的现象探究

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐