Tag: css3

可见性不能正常工作的CSS转换: 在下面的小提琴中，我分别对可见度和不透明度进行了转换。后者工作，但前者不。而且，在能见度的情况下，转换时间被解释为hover延迟。在Chrome和Firefox中都会出现。这是一个错误？ http://jsfiddle.net/0r218mdo/3/ 情况1： #inner{ visibility:hidden; transition:visibility 1000ms; } #outer:hover #inner{ visibility:visible; } 案例2： #inner1{ opacity:0; transition:opacity 1000ms; } #outer1:hover #inner1{ opacity:1; }

如何水平居中字体真棒图标？: 我有一个带有字体真棒图标的桌子，我想alignment左侧和中间的图标。我试图与居中<i>但不工作： HTML： <td><i class="icon-ok"></i></td> CSS： td, th { text-align: left; } td i { text-align:center; } 的jsfiddle 我也尝试设置text-align:center !important; 但不起作用。我做错了什么？

设置div高度使用jquery（伸展div高度）: 我有3个ids header ， content和footer div。页眉和页脚有固定的高度，它们的样式可以浮在上面和下面。我想用jQuery自动计算中间content高度。我怎样才能使这可能？ #header { height: 35px; width: 100%; position: absolute; top: 0px; z-index: 2; } #footer { height: 35px; width: 100%; position: absolute; bottom: 0px; z-index: 2; } 在此先感谢… 🙂 blasteralfred

为什么我的CSS3animation不能在Google Chrome浏览器中stream畅播放（但在其他浏览器上却很stream畅）？: 我的环境（我在哪里得到延迟）： Chrome上的Mac OSX El Capitan 10.11.2版本50.0.2661.102（64位） CODEPEN： animation：情况：我search了很多，没有find任何适合我的东西。我知道这个问题之前已经被问过了。当我使用Safari和Firefox打开网站时，我的Mac上的CSS3animation非常stream畅，但Chrome浏览器不支持！奇怪的是，原来的CodePen在Chrome上很stream畅。问题：我的代码中的某些内容导致animation只在Chrome上出现波涛汹涌。这是什么，我该如何解决？我看到了什么： Chrome CSS 3转换不顺畅我需要我的定位是相对适应不同的屏幕尺寸。 Chrome中的CSS3转换不顺畅 How to Create Smoother Animations and Transitions in the Browser Fixing CSS Transitions in Google Chrome How to Create Smoother Animations and Transitions in the Browser 码： HTML <div class="marquee"> <ul> <li> <a […]

可以在课堂上移除一个CSSanimation？: 基本上我想要做的是给一个元素一个CSSanimation，当它获得一个类，然后扭转animation，当我删除该类没有播放animation时，DOM呈现。小提琴在这里： http : //jsfiddle.net/bmh5g/ 正如您在小提琴中所看到的那样，当您hover“hover我”button时，# #item向下翻转。当鼠标hoverbutton时，#item就会消失。我希望#item翻转（理想情况下使用相同的animation，但相反）。这可能吗？ HTML： <div id='trigger'>Hover Me</div> <div id='item'></div> CSS： #item { position: relative; height: 100px; width: 100px; background: red; -webkit-transform: perspective(350px) rotateX(-90deg); transform: perspective(350px) rotateX(-90deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } #item.flipped { animation: flipper 0.7s; animation-fill-mode: forwards; -webkit-animation: flipper 0.7s; -webkit-animation-fill-mode: forwards; } @keyframes […]

阴影DOMreplace::之前和::之后？: CSS范围说影子主机的后代不能在格式化树中生成框。相反，活动影子树的内容会生成框，就好像它们是元素的内容。 CSS伪元素描述::before和::after as 这些伪元素生成框，就好像它们是源元素的直接子元素一样那么哪个是真的？首先，影子主机的所有内容（不包括::before和::after ）被活动影子树的内容replace。然后::before和::after在影子主机中生成框。首先， ::before和::after生成阴影主机中的框。然后，影子主机的所有内容（包括::before和::after ）被活动影子树的内容replace。 Firefox和Chrome做前者，但规范描述的行为？ var root = document.querySelector('div').createShadowRoot(); root.innerHTML = "<p>Shadow content</p>"; div::before, div::after { content: 'Generated content'; } <div>Content</div>

如何将标签添加到Chart.jscanvas插件？: 我使用了令人敬畏的插件Chart.js ，并试图在每个百分比内find显示标签的方式。所以我GOOGLE了，我发现这拉： https ： //github.com/nnnick/Chart.js/pull/35 我做了一个简单的小提琴来testing它，但不起作用： http : //jsfiddle.net/marianico2/7ktug/1/ 这是内容： HTML <canvas id="canvas" height="450" width="450"></canvas> JS $(document).ready(function () { var pieData = [{ value: 30, color: "#F38630", label: 'HELLO', labelColor: 'black', labelFontSize: '16' }, { value: 50, color: "#E0E4CC" }, { value: 100, color: "#69D2E7" }]; var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData, { labelAlign: 'center' […]

CSS 3形状：“反转圆”或“剪出圆”: 我想创build一个形状，我将其描述为“逆圆”：图像是不准确的，因为黑线应该继续div元素的外边界。这里是我现在的一个演示： http : //jsfiddle.net/n9fTF/ 甚至有可能没有图像的CSS ？

为什么不：访问而不是：访问链接？: 我看过的每个示例和样式表都使用a:visited来设置样式链接。另外a:visited具有较高的特异性，不应该:visited相当简单？