我发现了这篇帖子如何在单击时创建滑动DIV？
但是所有答案都是Jquery方法。有没有办法使用纯CSS创建这个效果？ 我还有其他想法...
- 我可以添加什么来使下拉的div停留在滚动时
- 更改触发动画的链接为“Close”，以使div向上滑动
这里是那篇帖子中的示例链接// http://shutterbugtheme.tumblr.com/
我也尝试过搜索，但唯一的结果都是Jquery方法...
8个回答
10
虽然有点hack，但是这是可行的。在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; }
- pushingphotons
1
该页面不存在。 - Andhi Irawan
6
在纯CSS中无法识别点击。您可以使用:hover和过渡来实现，但这是最接近没有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;
}
- Kyle
6
这是被接受的答案，但现在它被删除了。有什么问题吗？ - Kyle
在纯CSS中，“无法识别点击”。您可以使用@lostsource答案中提到的
:focus hack或使用隐藏的复选框和分配的标签作为触发元素来实现，参见：http://codepen.io/surjithctly/pen/pLDwe - feeela1相信如果你读完整个答案，你就会发现我已经提到了这一点。 - Kyle
-1 原因：复选框黑客/解决方案在许多情况下都为我服务过，我正在帮助提出这个答案。随时更新此答案，我将取消我的反对票。 :) - Alisso
该页面不存在。 - Andhi Irawan
3
您可以识别元素上的“焦点”事件并使用CSS过渡对其进行操作。
这里有一个例子，当单击时将 div 向下移动 50px。
标记
<div tabindex='1' id='box'></div>
CSS
#box {
background-color:#3a6d90;
width:100px; height:100px;
transition: margin-top 2s;
-moz-transition: margin-top 2s; /* Firefox 4 */
-webkit-transition: margin-top 2s; /* Safari and Chrome */
-o-transition: margin-top 2s; /* Opera */
}
#box:focus {
margin-top:50px;
outline:0;
}
- lostsource
2
这是一个很好的开始示例。你可以在底部看到他们发布了用于动画函数的源代码，尽管这是javascript。
sliding-js-generic
如果你想要纯css，我建议使用w3schools，它已经成为了多年来的优秀资源，但要注意，很多效果取决于浏览器支持是否能够实现你想要的效果。
w3schools-css
要实现他们所拥有的效果的基本结构，你只需要沿着两个div在body内的线路工作，将顶部隐藏和容器可见，并运行隐藏div的动画以显示向下推动另一个div，使它们保持联合。
<body>
<div id="hidden-div"></div>
<div id="main-content-div"></div>
</body>
- Calvin
4
@keihead，你问这个问题真有趣，因为CSS3动画并不是跨浏览器的。只要访问者的浏览器启用了JS，jQuery动画就可以在所有主流浏览器和IE6+上运行，更加稳定可靠。 - Joonas
jQuery 应该适用于所有主要浏览器，为什么我的答案被标记为下降了！我说的话没有任何问题。 - Calvin
我发誓我从没想过要给它打负分，那完全是个意外。我猜你因为这个错误给我的问题打了负分？ - KXXT
不，我没想到是你，而且我不是那种人。 - Calvin
1
运行这段代码。
input {
display: none;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px 20px;
border: 1px solid;
border-radius: 4px;
background: tomato;
color: #FFF;
font-family: arial;
-webkit-transition: background-color 0.1s, color 0.1s;
}
label:hover {
background: #blue;
color: #blue;
}
.test {
-webkit-transition: height .3s ease;
height: 0;
overflow: hidden;
width: 200px;
background: tomato;
margin-top: 10px;
color: #FFF;
}
input:checked + .test {
height: 100px;
}<label for="check">Click me</label>
<input id="check" type="checkbox">
<div class="test">
<p>I am some hidden text</p>
</div>- Saeed Heidarizarei
1
使用target伪类来检测点击即可完成此操作。
将按钮的href设置为滑动div的id。
然后，可以在滑动div上的slidingDiv :target类中使用css3 transition设置高度来实现下滑。
我认为没有一种纯CSS的方法可以使原始按钮更改其href以关闭滑动div，但您可以在滑动div上添加一个关闭按钮来关闭它。
这个关闭按钮通过在滑动div类上添加相同的过渡来工作。
这是一个演示。
享受。
- Danield
1
如果用户点击浏览器的返回按钮，它会添加到历史记录中，这可能会让用户感到烦恼。 - Ciasto piekarz
0
简单：
.contents {
background: yellow;
color: rgba(0, 0, 0, .8);
padding: 20px;
margin:0;
}
.slide-up, .slide-down {
overflow:hidden
}
.slide-up > div, .slide-down > div {
margin-top: -25%;
transition: margin-top 0.4s ease-in-out;
}
.slide-down > div {
margin-top: 0;
}
工作示例： https://jsfiddle.net/webarthur/3ep33h5s/
- Arthur Ronconi
0
另一种做同样事情的方法：
.contents {
background: yellow;
color: rgba(0, 0, 0, .8);
padding: 20px;
margin:0;
}
.slide-up, .slide-down {
overflow:hidden;
}
.slide-up > div, .slide-down > div {
transform: translateY(-100%);
transition: .4s ease-in-out;
}
.slide-down > div {
transform: translateY(0);
}
工作示例：https://jsfiddle.net/webarthur/3ep33h5s/1/
- Arthur Ronconi
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接