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

文章/答案/技术大牛

发布

伪元素动画和转换的例子

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

7355 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版本是不支持的，所以这些功能一般是在移动端使用

9146 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版本是不支持的，所以这些功能一般是在移动端使用

6431 1

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+】首先给父元素设置

6541 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 转换元素定义透视视图。

4641 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%...为了更容易知道链接的目标，有时你想让一些链接看起来和其它的不同。

2166 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 转换元素定义透视视图。

2.3K1 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转换（即如果是

3472 0

CSS3常用转换总结

一、2D转换 translate(npx,npx) ? 　　...-ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari...相对当前角度透视倾斜 /* 实现div在X轴和Y轴上分别倾斜20度和30度 */ div { transform: skew(30deg,20deg); -ms-transform...相对当前元素位置沿X轴移动 translateY(npx) 　　相对当前元素位置沿Y轴移动 translateZ(npx) 　　相对当前元素位置沿Z轴移动 translate3d...转换之rotate rotateX(ndeg) ?

3862 1

实现滚动时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中，当地址栏收缩时，上文的公式成立；但是当地址栏是展开状态时，两者会一个相差地址栏的高度。而地址栏是否展开我没找到判断的方法。

8123 0

能让你受益匪浅的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相等，但是安卓环境下当字体大小<14px/0.7rem的时候会出现居中失效的情况。...07 翘边阴影的实现利用:before和:after，加上绝对定位的性质，可以形成一个矩形，这个时候结合CSS3的倾斜属性skew和旋转属性rote。

9892 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 转换综合写法: 顺序会影转换效果，如果有位移和其他属性的时候

2621 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

3733 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

8166 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.2K10 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.1K1 0

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

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

1K1 0

居中方案

子元素还可以用 margin-left：-50% 来居中，但是这样会使子元素宽度变为实际宽度的1.5倍垂直居中父元素高度确定的单行文本设置父元素的 height 和 line-height 高度一致...父元素高度确定的多行文本设置父元素 display:table 用一个元素包裹多行标签元素，设置 display:table-cell 和 vertical-align:middle 父子元素高度未知...设置父元素 position:relative 设置子元素 position: absolute top: 50% transform: translateY(-50%) flex(不兼容IE) 父元素设置...display:flex;/*Flex布局*/ display: -webkit-flex; /* Safari */ 附：隐性改变display类型元素（不论之前是什么类型元素，display:none...的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

4534 0

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

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

1K3 0

巧用 CSS3 filter(滤镜) 属性

filter: grayscale(100%); 定义和使用 filter 属性定义了元素（通常是）的可视效果(例如：模糊与饱和度)。默认值 none 继承 no 动画支持是。...若未设定，默认是0 (阴影会与元素一样大小)。注意: Webkit , 以及一些其他浏览器不支持第四个长度，如果加了也不会渲染。 (可选)查看该值可能的关键字和标记。...值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0。 opacity(%) 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。...*/ /* 通过css选择器选出非hover的.card元素，给其伪类添加模糊、透明度和明暗度的滤镜 */ .cards:hover > .card:not(:hover):before{...下面这组照片墙，我们通过sepia滤镜将图像基调转换为深褐色，再通过降低饱和度 saturate 和色相旋转 hue-rotate 微调，模拟老照片的效果。

6941 0

点击加载更多

扫码

加入 开发者社群

领取 专属20元代金券

Get大咖技术交流圈

伪元素动画和转换的例子

CSS3的3D变换和动画

CSS3的3D变换和动画

CSS完成元素水平垂直居中

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

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

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

css 总结2 原

CSS3常用转换总结

实现滚动时Header自动隐藏

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

CSS-2D-3D转换

30+有用的CSS代码片段

30+有用的CSS代码片段

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

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

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

居中方案

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

巧用 CSS3 filter(滤镜) 属性

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐