css隐藏滑动栏_网页设计：使用CSS3隐藏/显示通知栏

受到读者之一的启发，我们将在本教程中向您展示如何使用控件按钮创建通知栏。 我们的想法是，我们可以通过单击按钮来隐藏或显示通知栏，类似于HelloBar 。

如标题所述，我们将使用（仅）一些CSS3功能进行此操作。 好吧，让我们开始吧。

• 观看演示

HTML标记

我们首先创建文档并构造HTML标记。 值得注意的是，HTML标记对于“ hide-n-show”功能正常工作起着重要作用，因为该功能将完全使用CSS3构建，它对元素的结构和位置非常敏感。

按以下顺序添加HTML元素。

<div class="notification-bar">
	<input id="hide" type="radio" name="bar" value="hide">
	<input id="show" type="radio" name="bar" value="show" checked="checked">
	
	<label for="hide">hide</label>
	<label for="show">show</label>
	
	<div class="notification-text">Hello World, you can hide this notification by clicking the close button.</div>
</div>

从上面的代码中可以看到，我们添加了两个带有标签的单选输入，以控制通知栏的可见性–默认情况下， checked show为show的输入单选。

在这一点上，你们中的一些人可能已经了解了它是如何工作的。 当使用的ID无线电输入hide检查的通知栏会被隐藏起来，当无线输入的ID它会显示show被选中。

款式

让我们添加一些装饰样式，以使通知栏看起来更好看。 这包括指定通知的背景颜色，字体颜色，隐藏单选输入并将代表性的图标添加到其标签。

.notification-bar {
	position: absolute;
	width: 100%;
}
.notification-text {
	background-color: #2980B9;
	padding: 15px;
	color: #fff;
	font-size: 14px;
	text-align: center;
	position: absolute;
	width: 100%;
}
.notification-bar input {
	display: none;
}
.notification-bar label {
	cursor: pointer;
	color: #fff;
	position: absolute;
	z-index: 5;
	display: inline-block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.notification-bar label[for=hide] {
	right: 15px;
	top: 11px;
	width: 24px;
	height: 24px;
	background: url('../img/close.png') no-repeat center center;
}
.notification-bar label[for=show] {
	width: 45px;
	height: 50px;
	border-radius: 0px 0px 3px 3px;
	right: 10px;
	background: url('../img/show.png') no-repeat center center #2980B9;
}

然后，我们的通知栏将变成以下屏幕截图中的样子。

真的很简单。 如果需要，您可以随时添加更多样式。

建立功能

当我们使用输入单选按钮时，我们能够应用CSS3 :checked伪类，然后使用同级选择器定位随后的元素。

.notification-bar input[value=show]:checked ~ label[for=show] {
	-webkit-transition: ease 350ms;
	-moz-transition: ease 350ms;
	-o-transition: ease 350ms;
	transition: ease 350ms;
	
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}

给定上面的代码， id中显示为id的单选输入时，其带有for=show属性的关联标签将从其原始位置移到顶部100％，同时附加的过渡属性将使其平滑移动。

用来隐藏通知栏的按钮应该是可见的，如下所示。

接下来，当用户单击关闭按钮时，通知栏以及关闭按钮应移至顶部并消失。 用于拉下按钮的按钮应回到其原始位置。

为此，我们可以通过这种方式编写规则。

.notification-bar input[value=show]:checked ~ label[for=show],
.notification-bar input[value=hide]:checked ~ label[for=hide],
.notification-bar input[value=hide]:checked ~ .notification-text {
	-webkit-transition: ease 350ms;
	-moz-transition: ease 350ms;
	-o-transition: ease 350ms;
	transition: ease 350ms;
	
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}
.notification-bar input[value=hide]:checked ~ label[for=show] {
	-webkit-transition: ease 350ms;
	-moz-transition: ease 350ms;
	-o-transition: ease 350ms;
	transition: ease 350ms;
	
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	transform: translateY(0%);
}

然后，要显示通知栏，我们可以编写规则，如下所示。

.notification-bar input[value=show]:checked ~ label[for=hide],
.notification-bar input[value=show]:checked ~ .notification-text {
	-webkit-transition: ease 350ms;
	-moz-transition: ease 350ms;
	-o-transition: ease 350ms;
	transition: ease 350ms;
	
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	transform: translateY(0%);
}

最终接触

最后，我想在首次加载页面通知栏时添加一点动画效果。 为此，我像这样创建了一个@kyeframe规则。

@keyframes initiate {
 	0% {
		transform:translateY(-100%);
 	}
 	50% {
 		transform:translateY(-50%);
 	}
 	100% {
 		transform:translateY(0%);
 	} 
}

并将动画分配给通知文本容器。

.notification-text {
	background-color: #2980B9;
	padding: 15px;
	color: #fff;
	font-size: 14px;
	text-align: center;
	position: absolute;
	width: 100%;

	-webkit-animation: initiate 350ms ease;
	-moz-animation: initiate 350ms ease;
	-o-animation: initiate 350ms ease;
	animation: initiate 350ms ease;
}

这就是我们需要的所有代码。 现在，您可以在演示页面中查看它的运行情况，或从以下链接下载源。

• 观看演示
• 下载源

翻译自: https://www.hongkiat.com/blog/show-n-hide-notification-bar/