Tag: css3

MSfilter添加了jquery

我正在研究一个项目，其中一项任务是使背景静态并覆盖整个页面。 关于这个我找到了这个教程 ，使用“很棒，简单，渐进的CSS3方式”。 我的问题是我有更多的页面，每个页面都有不同的背景，所以我必须将背景图像放在如下所示： （也就是css样式放在 ，而不是放在“html”上，就像在例子中一样） 正如您在该链接中看到的，IE有filter，如下所示： filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’.**myBackground.jpg**’, sizingMethod=’scale’); -ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’**myBackground.jpg**’, sizingMethod=’scale’)”; 问题是“myBackground.jpg”取自标签，正如我上面所写，因此我不能直接在css中编写（每个页面都有不同的背景）。 有没有办法使用jQuery添加这些filter？ 我成功地从body中获取了图像的路径，因此我只需要将其粘贴到此代码中，然后使用jQuery for IE <= 8添加。 谢谢你的回答，跟着他们我成功解决了我的问题。 所以，如果有人想要代码： $(function(){ var mu = $.browser; if (mu.msie && mu.version < 9) { var curBg = $('html').attr('style'); curBg = curBg.split('('); curBg = curBg[1].split(')'); $('html').css({ "filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+curBg[0]+"', sizingMethod='scale')", "-ms-filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+curBg[0]+"', sizingMethod='scale')" }); } […]

jQuery – 动画css背景大小？

我正在尝试动画我的背景图像的大小，但它不起作用 – 任何想法为什么从以下代码？ $(this).animate({‘opacity’ : 1, ‘background-size’:’70px 48px’, ‘right’:39, ‘top’:45}, 250); 注意：所有其他属性都正确设置了动画，它只是不更新​​的背景大小。 谢谢！

使用jquery或javascript更改CSS根变量

我在我的网页中使用CSS变量并制作一种主题颜色， :root { –themeColor: #0afec0; –hoverColor: #fff; –bodyColor: #EEF1EF; } 现在我到处使用var(–themeColor) ，我想在每次重新加载时为–themeColor分配一个随机颜色。 这可能吗？

通过添加带有Jquery的类来解决CSS3过渡问题

目前我有一个小提琴，我试图让css3不透明度过渡到我添加一个类时触发。 基本设置是我单击一个按钮，然后通过jquery我向dom添加一个div，然后我将该元素添加到dom后，然后添加一个类。 新的dom元素的添加类假设开始我的过渡，但它不是，唯一发生的是元素被显示但不透明度过渡不起作用。 任何帮助将非常感激，我留下链接到小提琴这里的小提琴链接 。是的我知道我可以用jquery做淡入，但这只是一个实验，可能会用来启动其他CSS过渡到其他不透明度

JQuery用于设置动态最大宽度

我对jQuery并不是特别擅长，所以完整的代码解决方案将是理想的。 该function将： 获得浏览器屏幕宽度的70％。 将该宽度转换为其对应的px值 使用从转换/计算中获得的值设置#mainContainer的最大宽度。 这是我想要设置max-width的容器的CSS样式： #mainContainer { background-image: url(bg3.jpg); background-repeat: repeat; background-color: #999; width: 70%; padding: 0; min-width: 940px; /* 940px absolute value of 70%. */ margin: 0 auto; min-height: 100%; /* Serves as a divider from content to the main container */ -webkit-border-radius: 10px; border-radius: 10px; }

动画选项HTML5 Canvas / CSS3 / jQuery

我有兴趣在其中或者HTML5 / JQuery的组合中做更多类似Flash的动画。 浮动的想法之一是飞鸟，角色动画和“补间”式动画序列。 我是背景的Flash开发者所以所有这些都是基于Flash的基于时间轴的补间动画系统的第二天性，所以我想知道HTML5 Canvas，CSS3和jQuery等新兴技术有什么可能？ 这些在动画之类的补间方面有多熟练？ 阅读有什么好的起点？ 例如， http：//www.thewildernessdowntown.com/上的飞鸟令人惊叹，它们似乎是3D，可变方向，速度，旋转，襟翼，速度。 在Flash中可以相对轻松地实现这一点，创建设置动画作为动画片段，在舞台上生成这些动画并以不同的速度或甚至在PV3D中在tweenlite中移动它们但我接下来不知道如何在canvas上实现这一点。 简而言之，关于如何实现上述目标的想法，关于闪存之外的这类动画的良好阅读材料以及您可能拥有的任何一般提示将非常感激。 谢谢

在页面加载时触发CSS3转换

我试图通过CSS3宽度转换实现页面加载的加载效果。 这是演示 。 HTML CSS .skill-bar { width: 57%; float: left; height: 11px; border-radius: 5px; position: relative; margin: 6px 0 12px 0; border: 2px solid #00edc2; } .skill-bar span { background: #00edc2; height: 7px; border-radius: 5px; display: inline-block; } .skill-bar span.w70 { width: 70%; } .skill-bar span { width: 0; transition: width 1s ease; -webkit-transition: […]

CSS Alternate Rows – 隐藏一些行

我正在尝试设置一个表格，以便每一行都是不同的颜色（奇数/偶数）。 我有以下CSS： #woo tr:nth-child(even) td { background-color: #f0f9ff; } #woo tr:nth-child(odd) td { background-color: white; } 但是，我的一些行可以隐藏，我仍然希望行交替。 如何调整上面所以它给出了备用行的外观，即使彼此相邻的行不一定是奇数和偶数？

如何在应用下一课之前等待css过渡完成

我试图让文本“摆动”，通过单向旋转过渡，然后旋转下一个方向旋转。 但是，它不会等待第一次转换完成，因此看起来只应用了最后一次转换。 如何强制它等待第一次转换完成？ JSfiddle： http ： //jsfiddle.net/hari_shanx/VRTAf/7/ HTML： home about us our range contact us blog CSS： .swing { position: absolute; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); writing-mode: lr-tb; -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; font-size: 18px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s […]

垂直滚动。 水平运动

我正在尝试找到垂直移动页面的代码，然后在垂直滚动的同时水平移动。 我很肯定这不是canvas，但我可能是错的。 这是一个例子。 http://enso.readymag.com/architects-own-houses/10/