Tag: css3

如何防止css3animation重置完成后?

我写了一个css3animation,它只执行一次。 animation效果很好,但animation完成后会重置。 我怎样才能避免这一点,我想保持结果,而不是重置它。 $(function() { $("#fdiv").delay(1000).addClass("go"); }); #fdiv { width: 10px; height: 10px; position: absolute; margin-left: -5px; margin-top: -5px; left: 50%; top: 50%; background-color: red; } .go { -webkit-animation: spinAndZoom 1s 1; } @-webkit-keyframes spinAndZoom { 0% { width: 10px; height: 10px; margin-left: -5px; margin-top: -5px; -webkit-transform: rotateZ(0deg); } 100% { width: 400px; height: 400px; […]

用rgba背景颜色覆盖背景图像

我有一个background-image的div 。 当用户hoverdiv时,我想用rgba颜色( rgba(0,0,0,0.1) )覆盖背景图像。 我想知道是否有一个单独的解决scheme(即不与多个div,一个图像和一个颜色等)。 我尝试了很多东西: <div class="the-div" id="test-1"></div> <div class="the-div" id="test-2"></div> <div class="the-div" id="test-3"></div> 而这个CSS: .the-div { background-image: url('the-image'); margin: 10px; width: 200px; height: 80px; } #test-1:hover { background-color: rgba(0,0,0,0.1); } #test-2:hover { background: url('the-image'), rgba(0,0,0,0.1); } #test-3:hover { background: rgba(0,0,0,0.1); } 看到这个小提琴 。 我看到的唯一的select是使用覆盖,使用JavaScript预加载,然后使用.the-div:hover { background: url('the-new-image'); } .the-div:hover { background: url('the-new-image'); […]

边框半径+背景颜色==裁剪边框

考虑应用具有border-radius , border和background-color CSS属性的div : <div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;"> Blah </div> 现在考虑一个类似的布局,但在inner-div中指定background-color : <div style="border-radius:10px; border: 1px black solid;"> <div style="background-color:#EEEEEE;"> Blah </div> </div> 令我惊愕的是内部的 <div>的background-color遮住了外部的 <div>的边框。 这是一个简单的问题示例。 实际上,我使用<table>作为交替行颜色的内部元素。 而我使用一个<div>作为外部元素,因为border-radius在<table>元素上似乎不起作用。 这是一个这个问题的例子jsfiddle 。 有没有人有一个解决scheme的build议?

hover时创build一个CSS“path”

我试图用(主要)CSS生成一个'漂亮的'CSS菜单,但也有一些jQuery : 我的总体思路是: +————————+ | | | | | +—+ | | | | | | |___| | <– Hover this center piece | | | | | | +————————+ +————————+ | _ | | |\ | <– All start moving up to top of screen | \ +—+ | | | | | | […]

CSS3转换和转换(Webkit)

考虑下面的小提琴 p { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: transform 1s ease-in; -moz-transition: transform 1s ease-in; -o-transition: transform 1s ease-in; transition: transform 1s ease-in; } a:hover + p { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } […]

发出使Bootstrap3图标旋转的问题

受Fontawesome的启发,我试图用bootstrap3制作一个旋转的图标。 这很容易通过CSS3转换和转换来实现。 问题是图标不能围绕中心旋转。 它在旋转时摇摆。 代码粘贴在下面。 任何人都知道是什么原因造成的 .spin { -webkit-animation: spin 2s infinite linear; -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; animation: spin 2s infinite linear; } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); […]

如何在CSS 3中为基于浏览器的浏览器制作斜angular和模拟效果?

如何使斜面和压缩效果提交button在CSS 3? 喜欢这个。 放大的图像 我只考虑基于Web-kit的浏览器。 而且我不是在问如何给圆angular以及如何给渐变button,我只是问关于斜angular效果 HTML <input type="submit" value="Submit your entry" class="input" />

表列,用CSS设置最小和最大宽度

我想有一个在列中可以伸展的表格,但是我在CSS中的最小和最大宽度有点麻烦。 这似乎也有一些相互矛盾的答案围绕如何工作: 最小/最大宽度应该工作: 防止重叠表td宽度的文本 最小/最大宽度不受支持: 表格属性的最小宽度和最大高度 我想有以下几点 table{ width:100%; } .a, .b, .c { background-color: red; } .a { min-width: 10px; max-width: 20px; } .b { min-width: 40px; max-width: 45px; } .c { } <table> <tr> <td class="a">A</td> <td class="b">B</td> <td class="c">C</td> </tr> </table> 有没有一种方法来实现这个没有JavaScript (即约束拉伸与列表)? 我只需要这个使用CSS3 + HTML5 一个jsfiddle东西不扩大: http : //jsfiddle.net/4b3RZ/10/ 如果我只设置列的最小宽度我得到一个成比例的拉伸: http […]

如何使用Twitter Bootstrap v3.0构build两列stream体布局

由于bootstrap在v3.0中删除了* fluid css类,所以我找不到构build两列stream体布局的方法。 目标是在旧的文档中实现类似于stream体布局示例的布局: http ://getbootstrap.com/2.3.2/scaffolding.html#layouts

旋转并翻译

我有一些旋转和定位文本行的问题。 现在这只是一个有效的位置。 旋转也可以,但只有当我禁用定位。 CSS: #rotatedtext { transform-origin: left; transform: rotate(90deg); transform: translate(50%, 50%); } HTML只是纯文本。