我正在尝试添加一个按钮,我有一个按钮,它的背景是用css线性渐变制作的,但它不起作用.
这是我的按钮的CSS.
a.button
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@green), color-stop(100%,#a5c956));
-webkit-transition: background 5s linear;
}
a.button:hover
{
-webkit-gradient(linear, left top, left bottom, color-stop(0%,@greenhover), color-stop(100%,#89af37))
}
如果你想知道@green和@greenhover,我正在使用.less来制作我的CSS.
这有什么不对吗？有任何想法吗？
http://jsfiddle.net/nicktheandroid/tVHYg/
当悬停时.wrapper,它的子元素.contents应该从0px它的自然宽度动画.然后当鼠标移开时.wrapper,它应该动画回来0px.该.wrapper元件应仅一样宽,它需要被(允许.contents成长),所以.wrapper在宽度要长,宽度收缩为.contents一样.应该没有设置的宽度.contents.我正在使用CSS3,但它可以在jQuery中完成,这很好.
问题: 看看JSfiddle
.wrapper 不仅需要它的宽度..contents它增长时,当它几乎达到它的全宽时,它会跳到下一行.wrapper,.contents消失,当它应该动画下来0px.wrapper {
display: inline-block;
height: 20px;
width: auto;
padding:10px;
background:#DDD;
}
.contents {
display:inline-block;
width:0%;
white-space:nowrap;
overflow:hidden;
background:#c3c;
}
.wrapper:hover .contents {
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
width:100%;
}<div class="wrapper">
<span>+</span>
<div class="contents">These …我在object标签中包含了一个SVG图像文件,如下所示:
<object type="image/svg+xml" data="linkto/image.svg">
<!-- fallback image in CSS -->
</object>
有问题的图像是一张世界地图,我想fill在鼠标悬停在a上时转换属性group,在这种情况下我按大陆分组我的SVG,所以南美看起来像这样:
<g id="south_america">
<path fill="#FAFAFA" d="(edited for brevity)"/>
</g>
我可以fill通过在SVG文档顶部使用以下CSS来使属性在悬停时更改:
<style>
#south_america path {
transition: fill .4s ease;
}
#south_america:hover path {
fill:white;
}
</style>
但是我无法通过fillCSS过渡使颜色渐渐消失,颜色会立即改变,有人可以对此有所了解吗？
我想知道如何在悬停时制作旋转或旋转的图像.我想知道如何使用CSS在以下代码上模拟该功能:
img {
border-radius: 50%;
}<img src="http://i.imgur.com/3DWAbmN.jpg" />我开始使用过渡来"现代化"网站的感觉.到目前为止,:hover转型运作良好.现在我想知道是否有可能基于其他事情触发转换,例如当一个类发生变化时.
这是相关的CSS:
#myelem {
opacity: 0;
display: none;
transition: opacity 0.4s ease-in, display 0.4s step-end;
-ms-transition: opacity 0.4s ease-in, display 0.4s step-end;
-moz-transition: opacity 0.4s ease-in, display 0.4s step-end;
-webkit-transition: opacity 0.4s ease-in, display 0.4s step-end;
}
#myelem.show {
display: block;
opacity: 1;
transition: opacity 0.4s ease-out, display 0.4s step-start;
-ms-transition: opacity 0.4s ease-out, display 0.4s step-start;
-moz-transition: opacity 0.4s ease-out, display 0.4s step-start;
-webkit-transition: opacity 0.4s ease-out, display 0.4s step-start;
}
触发更改的JavaScript是:
document.getElementById('myelem').className = "show";
但过渡似乎并没有发生 - …
我使用CSS过渡从右到左动画鼠标悬停的容器.这适用于除Internet Explorer之外的所有浏览器.原因是我在CSS left属性中使用(并且需要使用)calc().
我在这里创建了一个现场演示:现场演示
CSS看起来像这样:
div {
background: red;
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 90%;
-webkit-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
div.translate-less {
left: calc(90% - 4rem)
}
我在使用jQuery鼠标悬停时添加了.translate-less类:
$(document)
.on( 'mouseenter', 'div', function(){
$(this).addClass('translate-less')
})
.on( 'mouseleave', 'div', function(){
$('div').removeClass('translate-less');
})
现在我想在Internet Explorer中顺利过渡.为此,我甚至会抛弃这些特定浏览器的calc()并添加一个规则left: 85%;.但是IE 10和11已经放弃了对条件评论的支持,似乎没有办法专门针对这些浏览器.IE 10可以使用-ms-high-contrast-hack进行攻击 …
这个答案中有一个模态/sf/answers/1875236261/,它通过附加它来创建一个基于React的模态<body>.但是,我发现它与React提供的转换插件不兼容.
如何创建一个有过渡(在进入和离开期间)？
我试图在边界上悬停时扩展的边界上获得过渡悬停效果.
h1 {
color: #666;
}
h1:after {
position: absolute;
left: 10px;
content: '';
height: 40px;
width: 275px;
border-bottom: solid 3px #019fb6;
transition: left 250ms ease-in-out, right 250ms ease-in-out;
opacity: 0;
}
h1:hover:after {
opacity: 1;
}<h1>CSS IS AWESOME</h1>我在Jsfiddle上尝试过这个
是否可以在"状态"之间使用不同的延迟切换来使用CSS3过渡？例如,我试图在悬停时立即将元素设置为更高,然后在'mouseout'上等待一秒钟,然后再滑回元素的初始高度.
演示页面: jsfiddle.net/RTj9K(在右上角悬停黑框)
CSS: #bar { transition:.4s ease-out 0, 1s; }
我认为最后的时间与延迟相关,但它似乎并没有像我想象的那样工作.
我正在开发一个iPad HTML5应用程序,我已经实现了ontouch支持以更快地触发事件,我正在使用jQuery更容易地定位元素,但对于动画我正在使用CSS3过渡
你觉得什么更快？使用jQuery动画,因为我已经导入了库或使用jQuery定位元素时使用CSS3过渡？
css-transitions ×10
css ×8
css3 ×5
hover ×2
jquery ×2
border ×1
ipad ×1
javascript ×1
modal-dialog ×1
reactjs ×1
svg ×1
transitions ×1