Tag: css3

CSS3 transition / transform / translate3d会在转换的第一个或最后一个“帧”上导致严重的闪烁（在iPad上）: 所有，我正在开发专门针对iPad的网络应用程序，我正在使用CSS3过渡来为div设置动画（从左到右移动）。我的class级看起来像这样： .mover { -webkit-transition:all 0.4s ease-in-out; } 当用户单击按钮时，我这样做： var s = “translate3d(” + newPosition + “px, 0, 0)”; $(‘.mover ‘).css(‘-webkit-transform’, s); 除了用户第一次触发转换之外，这种方法效果很好; 第一次，有一个非常明显的闪烁。我意识到我不需要使用translate3d，因为我只是左右移动div，但据我所知，这迫使iPad使用GPU加速。（它是否正确？）提前谢谢了！ [UPDATE] 关于“闪烁”，我有点模棱两可。简而言之 – 我一直在尝试各种各样的CSS3过渡（特别是在iPad上），并且始终如一 – 我注意到在转换的开始或结束时有明显的闪烁。换句话说，过渡本身非常顺利。但是，根据精确设置，在转换开始或结束之前会有明显的闪烁。这是另一个例子：我有三张照片（PNG）堆叠在一起。底部PNG的不透明度= 1.0，顶部2的不透明度= 0.0。使用-webkit-keyframes，当照片淡入和淡出时，我能够获得丝般平滑的过渡。当动画结束时，底部照片以opacity = 1.0结束，前两个以opacity = 0.0结束。（这应该是他们的最终状态）。然而，正如动画结束一样，底部照片闪烁。就像浏览器强制重绘/重绘屏幕一样，这需要几分之一秒。破坏效果已经足够糟糕，然后渲染转换不可用。（在我的iMac上它几乎，但不是很难以察觉。在iPad上，这是不容错过的）。

用CSS3捏缩放: 我正在尝试完全像在谷歌地图中那样实现捏拉缩放手势。我观看了Stephen Woods的演讲 – “创建响应式HTML5触摸界面” – 关于这个问题，并使用了上面提到的技术。我们的想法是将目标元素的变换原点设置为（0,0）并在此处进行缩放。然后转换图像以使其在转换点居中。在我的测试代码中，缩放工作正常。图像在后续翻译之间放大和缩小。问题是我没有正确计算翻译价值。我正在使用jQuery和Hammer.js进行触摸事件。如何在变换回调中调整计算，使图像在变换点保持居中？ CoffeeScript（ #test-resize是带有背景图像的div ） image = $(‘#test-resize’) hammer = image.hammer -> prevent_default: true scale_treshold: 0 width = image.width() height = image.height() toX = 0 toY = 0 translateX = 0 translateY = 0 prevScale = 1 scale = 1 hammer.bind ‘transformstart’, (event) -> toX […]

hover图像时是否可以隐藏标题？: 这是我的代码：当我将鼠标hover在图像上时，会显示“某个标题”。有可能被隐藏吗？

如何浮动不同高度的元素？: 我正在开发一个响应式网页设计，将4列中的多个项目并排放置。这些物品具有不同的高度，因此浮动不能正常工作。这就是目前发生的事情：漂浮错误http://sofzh.miximages.com/javascript/floating-wrong.png 关于如何使元素浮动的任何想法：右浮动http://sofzh.miximages.com/javascript/floating-right.png 我想这应该适用于jQuery“砌体”，对吧？但是我正在使用Zepto.js，我猜一个jQuery插件不起作用。是否有任何纯CSS（CSS3）方式？有些窍门？如果这不适用于纯CSS或JS，则可以这样做：浮动不同http://sofzh.miximages.com/javascript/floating-different.png 现在，第5行，第6行和第7行不会像你期望的那样“真正”浮动，但内部有一个隐藏的换行符（clearfix）。纯CSS有没有办法解决这个问题？例如，使用nth-child(4n+4)和伪选择器，如:after应用带content的换行符？有什么想法吗？任何聪明的技巧使这项工作？

测试是否为CSS动画启用了硬件加速？: 我如何判断（出于测试目的）是否为CSS动画启用了硬件加速？我有以下代码，它基本上放大了一个元素并使其全屏（不使用HTML5全屏API）。当使用jQuery动画时，它在大多数手机上像一只口吃的哮喘龟一样运行，所以我使用的是CSS3。这是jsFiddle示例： $(“#makeFullscreen”).on(“click”, function() { var map = $(“#map”), mapTop = map.offset().top, mapLeft = map.offset().left; $(“#map”).css({ “position”: “fixed”, “top”: mapTop, “left”: mapLeft, “width”: map.outerWidth(true), “height”: map.outerHeight(true) }); setTimeout(function(){map.addClass(“fullscreen”)},1); return false; }); .mapContainer { width: 150px; height: 200px; position: relative; margin: 0 auto; } .map { background: #00f; position: absolute; top: 0; left: 0; […]

jQuery获取text-shadow变量: 当我点击具有CSS3文本阴影适当性的跨度时，我想得到4个变量。所以对于css适当的text-shadow: -4px 11px 8px rgb(30, 43, 2); ，我的代码应该是： $(“#element”).click(function () { var text-shadow = $(“#element”).css(“text-shadow”) }); 是否有可能将它拆分为： var y = “-4px”; var x = “11px”; var blur = “8px”; color = “rgb(30, 43, 2)”; 我需要以某种方式拆分第一个变量来获取这些数据。感谢名单

如何在css3动画中旋转椭圆形图像周围的图像？: 我是css3动画的初学者。我有一个任务就像，笔形图像是在椭圆形图像上旋转。尽我所能我尝试下面的代码用于我的任务。你有没有人帮我请？ #txtBoxRotateContainer { height: 800px; } #txtBoxRotateContainer { height: 400px; left: 18px; position: absolute; top: 305px;tive; height: 400px; } div.rocket { left: 136px; position: absolute; top: 316px; -webkit-transition: all 3s ease-in; /* Safari and Chrome */ -webkit-animation:myfirst 6s infinite; } @-webkit-keyframes myfirst { 0% { -webkit-transform: rotate(-360deg);width:250px;left:130px;top:-100px; } 50% { -webkit-transform:rotate(-180deg);left:80px;top:150xpx;width:360px; } 100% { -webkit-transform: […]

如何删除“Facebook社交插件”文本？: 我正在使用评论facebook social plugin当我嵌入它时，脚本创建了一个iFrame，其中包含文本“Facebook社交插件”，底部有facebook徽标（如下图所示）。我使用Firebug检查了元素，并尝试将其类设置为display:none; 在我的CSS文件中。然而 – 这并没有隐藏它（我怀疑它是因为它在它自己的iFrame中）。我如何使用CSS或jQuery（或任何其他方法）来禁用该文本？谢谢！

jquery draggable事件更改子元素的css: 嗨，请看这个代码 $(‘.new-div’).draggable({ containment: “#bord”, create: function() { $(“.new-div”).css(“width”, ‘auto’); }, drag: function() { $(“.new-div”).css(“width”, ‘auto’); }, start: function() { $(“.new-div”).css(“width”, ‘auto’); }, stop: function() { $(“.new-div”).css(“width”, ‘auto’); } }); $(document).on(“click”, “.closeButton”, function() { $(this).closest(‘div’).remove(); }); $(“.span1”).on(“click”, function(e) { var mycontent1 = $(this).text(); e.preventDefault(); $(“.span1”).focus(); $(‘.new-div’).removeClass(‘active’); $(this).closest(‘.new-div’).addClass(‘active’); if (mycontent1.trim() === “message”) { $(“.span1″).text(”); $(this).css(“width”, “100px”); $(this).css(“height”, […]

检查元素是否是动画CSS3: 有没有办法检查元素是否正在动画？但是不是用jquery的动画制作动画，而是用css3的过渡。我遇到的问题是……我有这个滑块，点击箭头我给它 left = left+200 左边是哪里 element.position().left 要么 parseInt(element.css(“left”)); （这没关系，问题也出现了）该元素正在动画 transition: left 400ms ease-in-out; 所以，当用户点击箭头一次然后在动画结束前再次点击时，左边会根据其位置返回值（因此，而不是说… 400px，它可能会返回235.47px，因为它是在动画中间点击的） ..