KXX*_*XXT 6 html css animation slidedown css3
我发现这篇文章如何在点击时创建滑动DIV？
但所有答案都是Jquery方法.有没有办法用PURE CSS创建它？我还有其他一些事情......
以下是该帖子中示例的链接// http://shutterbugtheme.tumblr.com/
我也试过谷歌搜索,但唯一的结果是jquery方法......
它可以做到,虽然它有点像黑客.保留状态的两个元素(在CSS中称为:checked)是复选框和单选按钮元素.因此,如果通过使用for属性将复选框与标签相关联并添加div,则可以通过读取(隐藏)按钮的状态来获得结果:
<div class=window>
<input type=checkbox class=toggle id=punch>
<label for=punch>Punch It, Chewie<label>
<div><p>Here’s my content. Beep Boop Blurp.</p></div>
</div>
而CSS:
input.toggle { display: none; }
input.toggle ~ div { height: 0px; margin: .2rem; overflow: hidden; }
input.toggle:checked ~ div { height: 180px; }
在纯CSS中识别单击是不可能的.您可以使用:悬停和转换,但这与您将在没有javascript的情况下接近.
.hover
{
cursor: pointer;
position: relative;
z-index: 1;
}
.slide
{
position: absolute;
top: 0;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
}
.hover:hover + .slide
{
top: 50px;
}
http://jsfiddle.net/Kyle_/MaMu9/1/
请注意,虽然转换是CSS3,但不适用于IE <9和更好的浏览器的旧版本.
编辑:在CSS中使用:focus属性发布另一个答案之后:有一点需要注意:您必须单击元素外部使其向下滑动以使其向上滑动,否则它可以正常工作.
请注意,元素必须具有tabindex ='1'(或任何有意义的数字,具体取决于元素在文档中的位置)才能使其生效.
.hover:focus + .slide
{
top: 50px;
-webkit-transition: top 1s;
}
http://jsfiddle.net/Kyle_Sevenoaks/MaMu9/1/
这是如何开始的一个很好的例子。你可以在底部看到，他们发布了他们使用的动画函数的源代码，尽管这是 JavaScript。
如果你想要纯CSS，我会使用ws3schools，多年来它一直是优秀的资源，但请注意，很大程度上取决于浏览器支持，以决定你想要的效果是否有效。
实现它们所具有的效果的基本结构，您只需要沿着主体内的两个 div 的线条工作，顶部隐藏，容器可见，然后运行隐藏 div 的动画以显示将另一个 div 向下推，保持它们都是内联的。
<body>
<div id="hidden-div"></div>
<div id="main-content-div"></div>
</body>
| 归档时间： |
|
| 查看次数： |
74830 次 |
| 最近记录： |