Tag: css3

CSS3翻译弧

当前的CSS3是否可以将一个对象(特别是DIV)沿弧线或曲线转换? 这是一个图像来帮助说明。

将文本基线与CSS中的buttonalignment

我想实现这个图像中的两个路线之一: 。 如果它使事情变得简单,CSS3是好的,甚至更好。 我的主要问题是,我设法将一个包含文本的div与buttonalignment,但文本本身与div的顶部alignment而不是底部。

有一个前景等同于背景图像在CSS?

我想添加一些闪耀的网页上的元素。 我宁愿如果我不必添加额外的HTML到页面。 我希望图像出现在元素的前面而不是后面。 什么是最好的方法来做到这一点?

CSS3animation和显示无

我有一个CSS 3animation的div在一段时间后滑入。 我想要的是几个div来填充幻灯片的空间,然后将这些元素推到页面上。 当我第一次尝试这个幻灯片仍然占用空间,即使不可见时。 如果我更改div display:none div不滑入。 我如何让div在占用时间之前不会占用空间(使用CSS进行计时)。 我正在使用Animate.css作为animation。 这是代码的样子: <div id="main-div" class="animated fadeInDownBig"><!– Content –></div> <div id="div1"><!– Content –></div> <div id="div2"><!– Content –></div> <div id="div3"><!– Content –></div> 正如代码所示,我希望主要div被隐藏,其他div首先显示。 然后我有以下延迟设置: #main-div{ -moz-animation-delay: 3.5s; -webkit-animation-delay: 3.5s; -o-animation-delay: 3.5s; animation-delay: 3.5s; } 正是在这一点上,我希望主要股东推动其他股东下来,因为它进来。 我该怎么做呢? 注:我已经考虑使用jQuery来做到这一点,但我更喜欢严格使用CSS,因为它更平滑,时序控制得更好一些。 编辑 我曾经尝试过Duopixel提出的build议,但是我误解了,并没有正确地做,或者它不起作用。 这里是代码: HTML <div id="main-div" class="animated fadeInDownBig"><!– Content –></div> CSS #main-image{ […]

子弹消失与CSS3列

当我将它们转换为使用CSS3的列时,我列表项目上的项目符号消失。 任何想法为什么或build议如何纠正? 看例子: http : //jsfiddle.net/gduDm/1/ ul li { list-style-type: disc !important; column-break-inside: avoid; } ul { list-style-type: disc !important; margin-top: 1em; column-count: 2; column-gap: 0.5em; }

如何在div的中心显示图像

我有一个Ajax的装载GIF图像的div <div id="mydiv" style="height: 400px; text-align: center;"> <img src="/Content/ajax-loader.gif" class="ajax-loader"/> </div> .ajax-loader { /*hidden from IE 5-6 */ margin-top: 0; /* to clean up, just in case IE later supports valign! */ vertical-align: middle; margin-top: expression(( 150 – this.height ) / 2); } 但无法显示在中心(垂直和水平)。 需要帮助。

可能使用border-radius和具有渐变的border-image?

我正在devise一个具有圆形边框(边框半径)的input框,并尝试向所述边框添加渐变。 我可以成功地制作渐变和圆angular边框,但是不能一起工作。 它可以是无渐变的圆形,也可以是带有渐变的边框,但不包含圆angular。 -webkit-border-radius: 5px; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%; 无论如何都有CSS属性一起工作,或者这是不可能的?

触发附加元素的CSS转换

正如这个问题所观察到的那样,在新添加的元素上直接的CSS转换被忽略了 – 转换的最终状态立即被渲染。 例如,给定这个CSS(前缀在这里省略): .box { opacity: 0; transition: all 2s; background-color: red; height: 100px; width: 100px; } .box.in { opacity: 1; } 这个元素的不透明度将被立即设置为1: // Does not animate var $a = $('<div>') .addClass('box a') .appendTo('#wrapper'); $a.addClass('in'); 我已经看到几种触发转换的方法来获得预期的行为: // Does animate var $b = $('<div>') .addClass('box b') .appendTo('#wrapper'); setTimeout(function() { $('.b').addClass('in'); },0); // Does animate var […]

中心三angular在底部

我试图在我的英雄底部有一个三angular形/箭头,但它不响应,并且不能很好地在移动上工作,因为三angular形漂浮在右边,不再是绝对中心。 我怎样才能让三angular形始终位于div底部的绝对中心? 示例代码在这里: http://jsfiddle.net/SxKr5/1/ HTML: <div class="hero"></div> CSS: .hero { position:relative; background-color:#e15915; height:320px !important; width:100% !important; } .hero:after, .hero:after { z-index: -1; position: absolute; top: 98.1%; left: 70%; margin-left: -25%; content: ''; width: 0; height: 0; border-top: solid 50px #e15915; border-left: solid 50px transparent; border-right: solid 50px transparent; }

造型引导工具提示上的箭头

我试图风格tootltips使用 .tooltip-inner{} 但我有麻烦,因为我找不到如何样式工具提示小箭头。 如截图所示,工具提示的箭头是黑色的,我想添加新的颜色: 有什么build议?