标签: css-transitions
CSS3跨弧转换
是否可以使用当前的CSS3沿弧或曲线平移对象(特别是DIV)？这是一张有助于说明的图片.
推荐指数
解决办法
查看次数
我可以使用CSS过渡为绝对定位元素设置动画吗？
我想用CSS转换动画元素的位置变化,但即使我在all属性上使用转换它也不起作用,如下例所示:http://jsfiddle.net/yFy5n/3/
但是,我不希望我的最终解决方案将转换应用于所有属性,而只是应用于位置更改.所以颜色变化应该是即时的,只有从左到右的位置变化应该是动画的(与现在发生的情况相反).
推荐指数
解决办法
查看次数
在悬停时创建CSS"路径"
我尝试使用(主要)CSS时产生一个"好"的CSS菜单,但有微小的一点jQuery的还有:
我的总体想法是:
+------------------------+
| |
| |
| +---+ |
| | | |
| |___| | <-- Hover this center piece
| |
| |
| |
+------------------------+
+------------------------+
| _ |
| |\ | <-- All start moving up to top of screen
| \ +---+ |
| | | |
| |___| |
| |
| |
| |
+------------------------+
+------------------------+
| +---+ |
| | | |
| |___| |
| | …推荐指数
解决办法
查看次数
在CSS网格布局中使用CSS过渡
我试图让我的粘性标题具有过渡效果,因此它可以减轻而不仅仅是快速移动.
我究竟做错了什么？
这是我的工作版本:
http://codepen.io/juanmata/pen/RVMbmr
基本上下面的代码将类添加到我的包装类中,这很好用.
$(window).on('load', function() {
$(window).on("scroll touchmove", function () {
$('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
});
});
这是CSS部分:
.wrapper {
grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.tiny {
grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
}
所以标题确实缩小了它应该但没有动画,我错过了什么或转换根本不适用于网格？
这是css-grid文档的链接.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
$(window).on('load', function() {
$(window).on("scroll touchmove", function() {
$('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
});
});* {
margin:0;
padding:0;
}
.wrapper {
display: grid;
grid-gap: 0px;
grid-template-columns: …推荐指数
解决办法
查看次数
css过渡到新元素
我找不到在新创建的dom元素上使用css过渡的方法.
假设我有一个空的html文档.
<body>
<p><a href="#" onclick="return f();">click</a></p>
</body>
我也有这个CSS
#id {
-moz-transition-property: opacity;
-moz-transition-duration: 5s;
opacity: 0;
}
#id.class {
opacity: 1;
}
而这个js
function f() {
var a = document.createElement('a');
a.id = 'id';
a.text = ' fading in?';
document.getElementsByTagName('p')[0].appendChild(a);
// at this point I expect the span element to be with opacity=0
a.className = 'class';
// now I expect the css transition to go and "fade in" the a
return false;
}
但是,正如您在http://jsfiddle.net/gwxkW/1/上看到的那样,当您单击该元素时,会立即显示.
如果我尝试在一个timeout()i中设置类经常 …
推荐指数
解决办法
查看次数
关闭Twitter Bootstrap Navbar Transition动画
就像http://twitter.github.com/bootstrap一样,
我现在工作的网站是响应式的.
我想删除过渡动画
当我单击折叠的导航栏菜单按钮时.
上面的图片是我要问的截图.
在TOP-RIGHT-CORNER,有一个三行菜单按钮.
推荐指数
解决办法
查看次数
点击使用纯CSS进行CSS3过渡
我正在尝试将图像(加号)旋转45度以创建十字符号.到目前为止,我已经设法使用下面的代码来实现这一点,但它正在进行悬停,我想让它在点击时旋转.
使用CSS有一种简单的方法吗？
我的代码是:
CSS
img {
display: block;
margin: 20px;
}
.crossRotate {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.crossRotate:hover {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
HTML
<body>
<img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
</body>
这是jsfiddle演示.
推荐指数
解决办法
查看次数
CSS3过渡不适用于display属性
每当我悬停其父元素时,我一直在尝试使用css来显示隐藏的Div淡入淡出.
到目前为止,我所要做的就是让隐藏的div显示,但是没有缓和的过渡.
这是我在JSfiddle上的代码http://jsfiddle.net/9dsGP/
这是我的代码:
HTML:
<div id="header">
<div id="button">This is a Button
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
CSS:
#header #button {width:200px; background:#eee}
#header #button:hover > .content {display:block; opacity:1;}
#header #button .content:hover { display:block;}
#header #button .content {
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
opacity:0;
clear: both;
display: none;
top: -1px;
left:-160px;
padding: 8px;
min-height: 150px; …推荐指数
解决办法
查看次数
CSS Transform会导致Safari中出现闪烁,但仅当浏览器宽度> = 2000px时才会出现闪烁
你读得对.在办公室中的多台机器上进行测试,方案之间的唯一区别是浏览器大小.一位同事将它缩小到2000px的甜蜜点.当我们每个人将浏览器的大小调整为> = 2000px宽并将鼠标悬停在具有变换动画的元素上时,页面上的各种元素 - 特别是具有CSS渐变背景的任何元素 - 将会闪烁.相反,如果您将浏览器的大小调整为<2000px宽并将鼠标悬停在同一元素上,则不会发生闪烁.
其他人看到过这种奇怪的行为吗？为什么2000px是一个神奇的数字,2000px究竟发生了什么？
注意 - 由于此网站尚未公开,我无法真正共享屏幕截图/视频/链接,并且代码相对不必要,因为这似乎更像是一个浏览器问题.
注2 - 我的问题实际上是围绕在2000px的Safari中发生了什么,不一定是如何修复闪烁backface-visibility或translateZ等等.原因是我们-webkit-font-smoothing: subpixel-antialiased;在整个网站中大量使用并使用任何这些技巧胜过整个页面的属性,为所有文本打开抗锯齿/灰度.
编辑 -好的,抱歉没有早点这样做.这里有一些jsFiddle中的代码应该重现这个问题:http://jsfiddle.net/brandondurham/ujPMK/embedded/result/
请记住,Safari必须设置为至少2000px宽才能实现.
推荐指数
解决办法
查看次数
奇怪的CSS3过渡(闪烁)
当我将鼠标悬停在我的按钮上时,它会在开始转换时首先发出白色闪光.当我将css3转换应用到我的按钮时,为什么会出现闪烁？我的浏览器是Google Chrome
看这里
<button>Log In</button>?
CSS:
button {
background: #ff3019;
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
border:1px solid #890000;
display:block;
margin:0 auto;
width:200px;
padding:5px 0;
border-radius:8px;
color:#fff;
font-weight:700;
text-shadow:0 1px 1px #000+50;
box-shadow:0 2px 3px #000+150;
-webkit-transition:background linear .5s;
}
button:hover {
background:#ff3019;
}
button:active { …推荐指数
解决办法
查看次数
标签 统计
css-transitions ×10
css ×9
css3 ×8
html ×2
css-grid ×1
css-position ×1
firefox ×1
javascript ×1
jquery ×1
rotation ×1
safari ×1
transform ×1
transition ×1
translate ×1