Tag: css3

滚动时固定标题: 我在页面中间有一个表格的标题，但由于页面很大，我想在页面向下滚动页面时将标题修复到浏览器的顶部… 所以我的问题是：如何将标题设置为正常，直到用户向下滚动并且标题的顶部边框触及浏览器边框，它应该保持固定在该位置，无论用户滚动多远？

如何使用jQuery同步CSS3动画事件和事件监听器: 我试图找出一个可靠的，跨现代的浏览器方法，使用CSS3动画事件和事件监听器来获得对CSS3动画的微调控制。我知道可以做到这一点。可悲的是，尽管我在过去的2-3周内完成了所有的研究，但现在这已经超出了我的能力范围。到目前为止，这是我的jsfiddle： http ： //jsfiddle.net/mvkMH/23/ 这是我正在尝试做的事情：我有一个，其id为#main包含，类为.box 。当用户点击任何.box它会将.move-y类添加到($this) – 它还会同时将.move-x类添加到剩余的列表项中。当用户单击另一个.box ，所有现有的.move-y and .move-x类都将替换为.move-y-rvs and .move-x-rvs类。一直使用CSS3 Animation事件来保持一切完美同步。为何选择CSS3动画事件？ CSS3动画在iOS上很快通过jQuery触发的CSS3动画允许你“重新启动”动画（如果已经播放过）（ https://css-tricks.com/restart-css-animation/ ）理论上，通过使用jQuery跟踪AnimationStart ， AnimationIteration和AnimationEnd事件，可以创建非常复杂和交互式的CSS3动画。这是脚本应该在我的脑海里工作的方式 – 我只是无法让它在现实生活中工作;-) 单击.box元素后，选中#main以查找任何.move-x和.move-y类如果检测到.move-x和.move-y类：用move-x-rvs和.move-y-rvs替换这些类使用.move-x-rvs和.move-y-rvs类将css 动画事件侦听器附加到元素在AnimationEnd Event上删除.move-x-rvs和.move-y-rvs类将AnimationName设置为空字符串（如果再次单击，则重置css3动画以再次播放）现在将.move-y类添加到$（this）将.move-x类添加到所有其他剩余列表项如果未检测到.move-x和.move-y：将.move-y类添加到$（this）将.move-x类添加到所有其他剩余列表项 4 – 动画事件监听器function应附加现代浏览器的前缀（如本例所示 – 如何通过JavaScript重新触发WebKit CSS动画？）再次，到目前为止，这是我的jsfiddle： http […]

使用引导程序更改表头颜色: 我有一个使用bootstrap的MVC5应用程序。表列名称在白色背景上为黑色，我想将其更改为蓝色背景，列名称将为白色，我该怎么做？我尝试使用CSS类没有成功… @Html.DisplayNameFor(model => model.name) @Html.DisplayNameFor(model => model.checkBox1)

如何垂直使用猫头鹰旋转木马？: 我不想采用插件代码，所以我想知道是否有人已经设法垂直使用插件。这个插件的一个耻辱可以横向使用。抱歉langage …

CSS3过渡的JQuery后备: 我正在寻找一个简单的CSS3转换代码的JQuery / JS回退。我的javascript非常基本，所以我找到并编写替换代码并不容易。我已经检查过modernizr但我并不是很了解很多文档。这是一个使用transform: rotate(20deg)的图标transform: rotate(20deg)当hover时transform: rotate(20deg) （这不是IE中支持的问题）。但问题是转型，我正在使用 .icon{ ….other css code -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } 这有一个JQuery后备吗？我在考虑fadeIn(); 但我不知道我将如何编码。像这样的东西？： $(icon).hover(function (){$(icon).fadeIn(“slow”);}); 我如何让浏览器知道它是一个后备，以便他们只选择JQuery，如果它是IE？

如何根据当前视口位置将图像置于特定div中？: 我正在尝试使用ajax加载内容时创建漂亮的动画。我想在使用“内容”重新加载div时使用显示图标，但我想不出是否可以只用CSS做到这一点。图标应该：水平始终位于div的中心，带有“内容” 垂直始终位于“内容的可见部分”的中心在幻灯片动画中隐藏菜单时，应将整个动画保留在“内容的可见部分”的垂直中心。如果根据“内容的可见部分”不可能进行垂直居中，则可以根据浏览器的视口使图像居中。 [编辑] ：这是我的小提琴： http ： //jsfiddle.net/QWB9x/74/以及可能应该更改的部分： .loading #img_loading { position: fixed; top: 50%; left: 50%; display: block; }

使用javascript进行MouseOver CSS3D效果: 我试图像这样实现mouseOver效果。我能够根据它们的位置生成每个瓷砖所需的css3d矩阵。我已经通过慢速鼠标移动实现了这种效果，但是如果我从一个瓷砖快速移动到另一个瓷砖，则它不能正常更新。它在瓷砖之间显示出差距。在鼠标hover时更新所有tile / tile坐标的最佳方法是什么，以便获得一致的效果？这是我的js代码： $(‘.box’).each(function() { $(this).css(‘height’, ‘284px’); $(this).css(‘width’, ‘284px’); }); generateGrid = function(w, h) { var t = this; this.p = []; var d = 30; var c = Math.floor($(‘.w’).outerWidth() / 284 + 1); var r = Math.ceil($(‘.w’).outerHeight() / 284) + 1; var vc = c * r; for (i […]

使用jQuery动画化CSS变换: 我正在尝试为div设置动画，让它围绕y轴旋转180度。当我调用以下代码时，我得到一个jQuery错误： $(“#my_div”).animate({ “transform”: “rotateY(180deg)”, “-webkit-transform”: “rotateY(180deg)”, “-moz-transform”: “rotateY(180deg)” }, 500, function() { // Callback stuff here }); }); 它说“Uncaught TypeError：无法读取未定义的属性’defaultView’并且说它在jQuery文件本身中……我做错了什么？

通过js组合css3变换: 请问有没有办法在一段时间内结合更多的CSS3变换？例如，当我设置它 $bgWrapper.css({ ‘-webkit-transform’ : ‘ scale3d(‘ + currScale + ‘, ‘+ currScale +’, 1)’ }); 然后片刻之后 $bgWrapper.css({ ‘-webkit-transform’ : ‘translate3d(‘+ ((currCoords[0])/currScale) +’px, ‘+ ((currCoords[1])/currScale) +’px, 0px) ‘ }); 我遇到了问题。第一个变换被第二个变换覆盖，但这就是我绝对不希望发生的事情。所以我观察到我可以组合这些值，所以我可以暂时存储旧值并执行此操作 var tmpTransform = $bgWrapper.css(‘-webkit-transform’); $bgWrapper.css({ ‘-webkit-transform’ : ”+ tmpTransform +’translate3d(‘+ ((currCoords[0])/currScale) +’px, ‘+ ((currCoords[1])/currScale) +’px, 0px) ‘ }); 但即使这样也不正确，重复通话也存在问题。那么有没有办法如何获得css3规模的精确值vie javascript？有没有办法如何通过js获得CSS3翻译的确切值？目前我只获得具有这些值的矩阵，当然我可以解析它，但我希望有更好的解决方案。 […]

有一个标准的CSS选择器类似于：jQuery中的eq（）吗？: 我不知道是否有一个CSS选择器可以像下面的行一样（jQuery代码）： .tab_cadre_central .top:eq(0) table tbody tr td table tbody tr:eq(3) 我在CSS中尝试过这样的事情： .tab_cadre_central .top::nth-child(0) table tbody tr td table tbody nth-child:eq(3) { display:none; } 但它不起作用。