草庐IT

CSS过渡

全部标签

javascript - 为什么不能使用 JavaScript 改变 CSS 动画的速度

我制作了一个CSS动画和一些JavaScript代码来更新动画速度。看来我的JavaScript代码是有效的,但是一旦在CSS中设置了速度,它就不能再更新了。如果我不在CSS中设置速度,则JavaScript可以正常工作。#circle1{width:200px;height:200px;background:blue;-webkit-animation:upDown5sinfinite;/*SafariandChrome*/animation:upDown5sinfinite;}如果删除上面css中的最后两行,则以下javascript有效document.getElementByI

jquery - CSS - 设置高度页眉/页脚,动态内容..不适用于 osXsafari/iOSsafari? (jsBin)

Ihavethisgreatsolutionfrom@RokoC.Buljan,但它只适用于chrome和firefox..在safari上,内容部分不滚动,页脚似乎粘在内容的底部,使其无法访问..对于Safari/iOSsafari有什么办法可以解决这个问题吗?..或跨浏览器兼容的替代解决方案?http://jsbin.com/negin/9/editHTML:ContentthatappearsHeaderContentLoremipsum...FooterCSS(使用calcfordynamicseemssupported,但也许这就是问题所在?):#view{overflow:

jquery - CSS - 设置高度页眉/页脚,动态内容..不适用于 osXsafari/iOSsafari? (jsBin)

Ihavethisgreatsolutionfrom@RokoC.Buljan,但它只适用于chrome和firefox..在safari上,内容部分不滚动,页脚似乎粘在内容的底部,使其无法访问..对于Safari/iOSsafari有什么办法可以解决这个问题吗?..或跨浏览器兼容的替代解决方案?http://jsbin.com/negin/9/editHTML:ContentthatappearsHeaderContentLoremipsum...FooterCSS(使用calcfordynamicseemssupported,但也许这就是问题所在?):#view{overflow:

html - 如何删除内联 block (CSS) 的底部 1px?

我会在解释中引用这个截图:我已经像您在图片中看到的那样设置了选项卡。我希望事件选项卡(图中的主页)下方有一条1px的黑线,所以我使用了底部边框。然而,很难看到粉红色背景延伸到整行。我希望粉红色停止在选项卡的底部绘制,如果有边框则不包括边框(所以底部上方仅1像素)。.main_tabs{width:100%;display:inline-block;background:#FFDEFD;}li.activea,li.active{background:#fff;color:#4c4c4c;border-radius:3px3px0px0px;border-bottom-color:#00

html - 如何删除内联 block (CSS) 的底部 1px?

我会在解释中引用这个截图:我已经像您在图片中看到的那样设置了选项卡。我希望事件选项卡(图中的主页)下方有一条1px的黑线,所以我使用了底部边框。然而,很难看到粉红色背景延伸到整行。我希望粉红色停止在选项卡的底部绘制,如果有边框则不包括边框(所以底部上方仅1像素)。.main_tabs{width:100%;display:inline-block;background:#FFDEFD;}li.activea,li.active{background:#fff;color:#4c4c4c;border-radius:3px3px0px0px;border-bottom-color:#00

html - 制作 CSS 伪元素 :after same height as parent div

我有一个父div,它的边缘必须有蓝色背景。我决定使用:before伪元素来做到这一点。我已将位置设置为绝对位置,将高度设置为100%。现在,当我将它的高度设置为100%时,我相信before正在占用页面的高度而不是它的div加上它几乎看起来好像这个伪元素:before是一个位置固定的div。这是一些代码testCSS.editableDiv{background-color:#DEDEDE;min-height:100px;max-height:400px;overflow:scroll;}.editableDivp{padding:0px0px0px43px;}.editableDi

html - 制作 CSS 伪元素 :after same height as parent div

我有一个父div,它的边缘必须有蓝色背景。我决定使用:before伪元素来做到这一点。我已将位置设置为绝对位置,将高度设置为100%。现在,当我将它的高度设置为100%时,我相信before正在占用页面的高度而不是它的div加上它几乎看起来好像这个伪元素:before是一个位置固定的div。这是一些代码testCSS.editableDiv{background-color:#DEDEDE;min-height:100px;max-height:400px;overflow:scroll;}.editableDivp{padding:0px0px0px43px;}.editableDi

html - 如何摆脱 'settle blur' CSS 效果

我目前有一个我悬停在其上的图block最初是模糊的。图像缩小后,这种模糊会稳定下来并在图block上产生不良效果。请查看我粘贴的代码。它应该让您对我在说什么有一个清晰的认识。我尝试在图像悬停前后修改CSS,但这并没有改变任何东西。.tiles{display:-moz-flex;display:-webkit-flex;display:-ms-flex;display:flex;-moz-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;postiion:relative;margin:-2.

html - 如何摆脱 'settle blur' CSS 效果

我目前有一个我悬停在其上的图block最初是模糊的。图像缩小后,这种模糊会稳定下来并在图block上产生不良效果。请查看我粘贴的代码。它应该让您对我在说什么有一个清晰的认识。我尝试在图像悬停前后修改CSS,但这并没有改变任何东西。.tiles{display:-moz-flex;display:-webkit-flex;display:-ms-flex;display:flex;-moz-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;postiion:relative;margin:-2.

jquery - 如何使用纯 CSS 在当前状态下更改图像 onclick?

我想在单击对象时将图像更改为其他图像。代码按以下顺序堆叠:HTML:编辑精选老虎机桌面游戏累计大奖小游戏视频扑克所有游戏搜索结果我想做的是:我想在单击时将图像更改为图像的彩色版本,即其他图像。现在,我知道我可以使用jquery/JS来完成它。但我不想要大量的JS代码来完成如此简单的事情。可以使用更简单的方法来完成吗?就像CSS中的.current我好像想不出来。CSS: 最佳答案 这是基本思想。它可以通过使用CSSsprites得到极大的改进。使用sprite也将消除加载点击图像的延迟。有关CSSSprites的介绍,请参阅:htt