Tag: css3
如何缩放，使容器也增长和占用空间
所以我有一个容器，我想要扩大和缩小（放大和缩小），但也有扩大/缩小的forms占用空间，而不是重叠其他的东西。 更新 有一个图像，有absolute div放置在坐标，他们必须保持其上下相对位置（因此为什么我使用规模）。 var b = document.getElementById("outer"); var scale = 1; function increase() { scale += 0.1 b.style.transform = `scale(${scale})`; } function decrease() { scale -= 0.1 b.style.transform = `scale(${scale})`; } #outer { overflow-x: auto position: relative; transform-origin: left top; } .pointer { width: 20px; height: 20px; background-color: orange; position: absolute; } #a1 { […]
CSS3关键帧animation：结束并保持最后一帧
尝试播放CSS3关键帧animation时遇到了一些困难，并且在animation完成后，将相关元素粘在最后一帧。 就我的理解，我必须为此设置的属性应该是animation填充模式，它应该具有向前的价值; 这没有做任何事情。 .animatedSprite { .animation-name: sprite; .animation-duration: .5s; .animation-iteration-count: 1; .animation-direction: normal; .animation-timing-function: steps(3); .animation-fill-mode: forwards; //Vendor prefixes… } 这将只播放一次animation，然后返回到第一帧。 我在JSFiddle（ http://jsfiddle.net/simurai/CGmCe/ ）find了一个关键帧animation的例子，改变填充模式转发和设置迭代计数为1也不会在那里做任何事情。 任何帮助将不胜感激。
检测'transform：translate3d'的支持
有谁知道我将如何检测transform: translate3d(x,y,z)支持是可用的？ 我的问题是我想在支持它的浏览器上使用translate3d ，因为它倾向于使用硬件加速，因此对于animation更平滑，然后回落到不支持的位置。
CSS3框阴影：两者，外部和内部
是否有可能创build一个3D效果的外部阴影和内部embedded发光？ 我有一个石灰绿背景的div在蓝色的顶部。 到目前为止，我有以下几点： .greendiv{ background:darkgreen; box-shadow: box-shadow: 10px -7px 15px darkgray; box-shadow: lightgreen 0px 0px 3px inset; } 实际的颜色是#ffffff格式。 看来第二个声明取消了第一个声明。 有没有解决的办法？
如何更改select框箭头
我需要你的帮助。 我似乎无法把我的头围绕在这一个，并找出答案。 如何在select框中更改默认的Windows 7，IE 10默认箭头： 使其看起来像这样，使用下面的自定义箭头： 。 这是我希望使用的箭头： 这是我的HTML标记： <!DOCTYPE html> <html> <head> <style type="text/css"> select { font: normal 13px Arial; color: #000;} .container { border: 1px solid red; position: relative; width: 124px; height: 18px; overflow: hidden; } .inpSelect { color: black; background: #ffa; position: absolute; width: 128px; top: -2px; left: -2px; } </style> <script […]
表的边界半径不起作用
我想在整个表格中添加一个边框半径。 但是下面的代码在最新版本的Firefox和Google Chrome中都不起作用。 HTML <table class="bordered"> <thead> <tr> <th><label>Labels</label></th> <th><label>Labels</label></th> <th><label>Labels</label></th> <th><label>Labels</label></th> <th><label>Labels</label></th> </tr> </thead> <tbody> <tr> <td><label>Value</label></td> <td><label>Value</label></td> <td><label>Value</label></td> <td><label>Value</label></td> <td><label>Value</label></td> </tr> </tbody> </table> CSS table { border-spacing: 0; width: 600px; margin: 30px; border: 1px solid #CCCCCC; border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; box-shadow: 0 […]
CSS：在hover显示和隐藏不同的div在同一时间？
这里是CSS示例如何显示隐藏的div（在hover）： <div class="showhim">HOVER ME<div class="showme">hai</div></div> 和 .showme{ display: none; } .showhim:hover .showme{ display : block; } 我只能使用CSS来显示一个div并同时隐藏另一个div吗？ 这里是如何使用JS为此目的的示例： http : //jsfiddle.net/joshvito/GaZQ6/
无法在一个周期结束时停止animation
我正在制作一个CSSanimation，在这个animation中，我正在移动东西，并希望它停留在最后位置，直到用户将鼠标移开。 body { background: url('osx.jpg'); padding: 0; margin: 0; line-height: 60px; } @-webkit-keyframes item1 { 0% { bottom: -120px; left: 0px; } 10% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); } 100% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); } } @-webkit-keyframes item2 { 0% { bottom: -120px; left: 0px; } 10% { bottom: 60px; […]
如何在Safari中使用jQuery查找多背景的background-position / background-image等
也许我在这里错过了一些东西。 我试图获取具有多个背景的元素（ div ）的当前背景信息，使用longhand background-repeat ， background-position和background-image 。 使用jQuery，我只是做var bPos = $('#element').css('background-position')来获取当前位置的集合，这会给我像'0 0, 100px 100px, left bottom' Firefox和Chromium（目前版本分别为5和12），但是在Safari（OS-X上的版本5）中，它只返回第一个值对（ '0 0' ）。 这些CSS值是在外部样式表中设置的。 有没有人有任何想法，为什么这是，以及如何去得到在Safari的全套价值对（使用速记background属性也不这样做）？ 编辑： 这是在外部样式表中使用的CSS： #page{ background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x; background-image: url('..http://img.dovov.comline.png'), url('..http://img.dovov.comline.png'), url('..http://img.dovov.comline.png'), url('..http://img.dovov.comline.png'), url('..http://img.dovov.comline.png'); background-position: 0 798px, 0 653px, 0 125px, 0 88px, 0 78px; } 编辑： 好的，我在jsFiddle上为此做了一个testing用例，并将其报告为jQuery 错误，因为它似乎是可重复的行为（虽然我接受它可能是浏览器实现问题，而不是实际上的jQuery错误）。 不过，如果有人有任何想法… 编辑： […]
将光标设置为<symbol>元素
我有一个HTML符号 <symbol id="arrow" viewBox="0 0 8.4666659 8.4666659"> <g transform="translate(0,-288.53334)"> <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 0.17215798,288.70836 8.05225192,8.04935"></path> <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 8.2221335,293.64243 0.00228,3.11528 -3.1283502,2.2e-4"></path> </g> </symbol> 我想用作光标。 我熟悉如下通过JQuery更改光标： body.css('cursor', `wait`); 但是我怎样才能做到这一点<symbol>元素？
