基于CSS3的面板
问题描述:
我有这个基于CSS3的滑出面板。我怎样才能让这个幻灯片垂直而不是?非常感谢你的帮助。基于CSS3的面板
* {
margin:0;
padding:0;
font-family:"Helvetica Neue", Helvetica, Sans-serif;
word-spacing:-2px;
}
h1 {
font-size:40px;
font-weight:bold;
color:#191919;
-webkit-font-smoothing: antialiased;
}
h2 {
font-weight:normal;
font-size:20px;
color:#888;
padding:5px 0;
}
.message {
background:#181818;
color:#FFF;
position: absolute;
top: -250px;
left: 0;
width: 100%;
height: 250px;
padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;
}
.message h1 {
color:#FFF;
}
#toggle {
position:absolute;
appearance:none;
cursor:pointer;
left:-100%;
top:-100%;
}
#toggle + label {
position:absolute;
cursor:pointer;
padding:10px;
background: #26ae90;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
margin:20px 50px;
transition:all 500ms ease;
}
#toggle + label:after {
content:"Open"
}
.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
padding:5em 3em;
}
#toggle:checked ~ .message {
top: 0;
}
#toggle:checked ~ .container {
margin-top: 250px;
}
#toggle:checked + label {
background:#dd6149;
}
#toggle:checked + label:after {
content:"Close"
}
<input type="checkbox" name="toggle" id="toggle"/>
<label for="toggle"></label>
<div class="container">
<h1>Pure CSS3 Slide Down Toggle Demo</h1>
<h2>Click the Open button to see content</h2>
</div>
<div class="message">
<h1>Hidden message here</h1>
<h2>CSS3 slide out menu</h2>
</div>
答
所以,我转向一些top
和left
值周围,确信与内容的其余部分改变了按钮的位置等,最终我得到这个代码:
* {
margin:0;
padding:0;
font-family:"Helvetica Neue", Helvetica, Sans-serif;
word-spacing:-2px;
}
h1 {
font-size:40px;
font-weight:bold;
color:#191919;
-webkit-font-smoothing: antialiased;
}
h2 {
font-weight:normal;
font-size:20px;
color:#888;
padding:5px 0;
}
.message {
background:#181818;
color:#FFF;
position: absolute;
top: 0;
left: -250px;
width: 250px;
height: 100%;
padding: 20px;
transition: left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;
}
.message h1 {
color:#FFF;
}
#toggle {
position:absolute;
appearance:none;
cursor:pointer;
left:-100%;
top:-100%;
margin-left:0;
transition:margin-left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
#toggle + label {
position:absolute;
cursor:pointer;
padding:10px;
background: #26ae90;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
margin:20px 0 20px 50px;
transition:background 500ms ease, margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
#toggle + label:after {
content:"Open"
}
.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
padding:5em 3em;
}
#toggle:checked {
margin-left: 250px;
}
#toggle:checked ~ .message {
left: 0;
}
#toggle:checked ~ .container {
margin-left: 250px;
}
#toggle:checked + label {
margin:20px 0 20px 300px;
background:#dd6149;
}
#toggle:checked + label:after {
content:"Close";
}
<input type="checkbox" name="toggle" id="toggle"/>
<label for="toggle"></label>
<div class="container">
<h1>Pure CSS3 Slide Down Toggle Demo</h1>
<h2>Click the Open button to see content</h2>
</div>
<div class="message">
<h1>Hidden message here</h1>
<h2>CSS3 slide out menu</h2>
</div>
你的意思是_horizontally_?面板已经垂直滑出。 – Xufox 2015-04-05 20:27:12