Tag: css3

hover后如何在鼠标上反转animation

所以,有可能在鼠标上有反转animation,例如: .class{ transform: rotate(0deg); } .class:hover{ transform: rotate(360deg); } 但是,当使用@keyframesanimation,我无法得到它的工作,例如: .class{ animation-name: out; animation-duration:2s; } .class:hover{ animation-name: in; animation-duration:5s; animation-iteration-count:infinite; } @keyframe in{ to {transform: rotate(360deg);} } @keyframe out{ to {transform: rotate(0deg);} } 什么是最佳的解决scheme,知道我需要迭代和animation本身? http://jsfiddle.net/khalednabil/eWzBm/

如何在CSS中旋转文本

如何在CSS中旋转文本以获得以下输出… 喜 编辑: 感谢您的快速build议。 我已经在jsfidle中添加了我的示例代码: http://jsfiddle.net/koolkabin/yawYM/ 我面临的问题是,当我们旋转文本,然后它打破了alignment和立场……那么是什么原因造成的,我怎样才能pipe理他们?

如何在循环中播放CSS3转换?

下面的样式只是一个如何在CSS3中设置转换的例子。 是否有一个纯粹的CSS技巧,使循环播放? div { width:100px; height:100px; background:red; transition:width 0.1s; -webkit-transition:width 0.1s; /* Safari and Chrome */ -moz-transition:width 0.1s; /* Firefox 4 */ -o-transition:width 0.1s; /* Opera */ transition:width 0.1s; /* Opera */ } div:hover { width:300px; }

在css中使用target =“_ blank”

我在我的网站的顶部菜单中有外部链接。 我想在新标签中打开这些链接。 我可以在HTML中使用“target = _blank”来实现它。 有没有类似的CSS属性或其他?

raphael.js vs paper.js

raphael.js和paper.js之间的主要区别是什么? 有没有其他的库在那里我应该看看? 任何像这些更专注于CSS3然后SVG? 谢谢!

如何在bootstrap中的容器内创build100%的屏幕宽度div?

比方说,我有以下标记: <div class="container"> <div class="row"> <div class="col-md-12"> … <div class="full-width-div"> </div> </div> </div> </div> 现在如何使.full-width-div伸展到屏幕的整个宽度? 因为目前它在容器内部是有限的。

与背景大小的多个背景

我正在尝试使用css3的多重背景支持来创build一个覆盖页面的背景; html, body { background: url('https://github.com/jaysalvat/vegas/raw/master/overlays/01.png') repeat, url('http://farm8.staticflickr.com/7260/7502004958_595bf03fbf_z.jpg') top left no-repeat; background-size: cover; }​ 我想要照片的背景图像“覆盖”的页面和覆盖层是小(3 * 3px)重复的孔页面。 上面的例子给了我http://jsfiddle.net/tpmD4/ (覆盖页面的覆盖)。 我该如何解决这个问题? 当我尝试指定两个图像的background-size: 3px 3px, cover; ( background-size: 3px 3px, cover; ); 然后图像背景不覆盖,但覆盖的作品。

造型Twitter的Bootstrap 3.xbutton

Twitter的Bootstrap 3button的颜色有限。 默认情况下会有5 7种颜色(默认主要,错误,警告,信息,成功和链接)请参阅: 每个button都有3个状态(默认,活动和禁用) 如何添加更多颜色或创build自定义button? 这个问题已经为Twitter的Bootstrap 2.x: 造型twitter引导button回答了。 引导程序3不向后兼容。 在less和css文件中会有很多变化。 IE7的支持将被丢弃。 TB3首先是移动的。 标记码也将被改变。

如何在Windows上的CSS 3中更加stream畅地呈现精简的字体?

当我在Adobe Flash Pro CS6中devise我的网站时,字体如下所示: 字体看起来很平滑,稍微厚一点,当我创buildHTML和CSS来在浏览器中呈现字体时,它们分别出现在IE,Firefox和Chrome中。 在某些地区看起来更薄更像素化。 我在OS X上看到了更平滑的字体渲染。我怎样才能使这些浏览器中的字体显得更stream畅? 我假设这是一个ClearType的问题,这看起来像这样的细字体可怕。 这里是我用来testing的代码,所以可以在发布前testing答案: <html> <head> <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css' /> </head> <body> <span style="color: #333; font-family: Lato; font-size: 32px;">Question or concern?</span> </body> </html>

Bootstrap 3以响应的方式在表格的行内截断长文本

我使用的是bootsrap 3表格,当我把大文本放在表格中的时候,它被包装在几行上,但是我希望它能够以一个响应的方式在最后以三点截断,而不会搞乱表格的布局(我发现一些解决scheme,但有不愉快的效果)。 那可能吗 ? 怎么样 ? PS:任何解决scheme是受欢迎的,但我希望它只是HTML / CSS,如果可能的话。