当前位置：首页 > 网页特效 > 其他

CSS动画的定时通知

分类：其他日期：2024-05-14 点击(3) 评论(0)

CSS动画的定时通知

简介

在今天的技巧中，我们将向您展示如何使用CSS动画创建简单的定时通知。 想法是在特定持续时间内显示通知或警报，然后使其消失。 我们将使用一个进度指示器来显示该框消失之前还剩下多少时间。
您肯定已经在某处看到它，我在buysellads.com上发现了它，其中显示了定时通知，即保存了一些设置之后。
对于标记，我们将简单地在其中带有消息的区域中进行划分，并在小进度条中附加一个区域：
```css
<div class="tn-box tn-box-color-1">
	<p>Your settings have been saved successfully!</p>
	<div class="tn-progress"></div>
</div>
```
通知框将具有tn-box和tn-box-color-1类，这些类将用于定义不同的颜色。
然后我们定义盒子的样式：
```css
.tn-box {
	width: 360px;
	position: relative;
	margin: 0 auto 20px auto;
	padding: 25px 15px;
	text-align: left;
	border-radius: 5px;
    box-shadow: 
		0 1px 1px rgba(0,0,0,0.1), 
		inset 0 1px 0 rgba(255,255,255,0.6);  
	opacity: 0;
	cursor: default;
	display: none;
}
 
.tn-box-color-1{
	background: #ffe691;
	border: 1px solid #f6db7b;
}

```
我们将框设置为显示：无，并将其设置为0不透明度。
进度栏将具有以下样式：
```css
.tn-progress {
	width: 0;
	height: 4px;
	background: rgba(255,255,255,0.3);
	position: absolute;
	bottom: 5px;
	left: 2%;
	border-radius: 3px;
	box-shadow: 
		inset 0 1px 1px rgba(0,0,0,0.05), 
		0 -1px 0 rgba(255,255,255,0.6);
}
```
最初，该条的宽度为0。
在此示例中，我使用带有复选框的按钮，该按钮一旦选中便会启动动画：
```css

input.fire-check:checked ~ section .tn-box {
	display: block;
	animation: fadeOut 5s linear forwards;
}
 
input.fire-check:checked ~ section .tn-box .tn-progress {
	animation: runProgress 4s linear forwards 0.5s;

```
该按钮在本节之前带有通知框，因此我可以使用常规的同级组合器。
如果您想使用JavaScript添加类，则可以定义以下内容：
```css
.tn-box.tn-box-active {
	display: block;
	animation: fadeOut 5s linear forwards;
}
 
.tn-box.tn-box-active .tn-progress {
	animation: runProgress 4s linear forwards 0.5s;
}
```
其中tn-box-active是您添加到tn-box div中的类。
盒子本身的动画如下：
```css
@keyframes fadeOut {
	0% 	{ opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; transform: translateY(0px);}
	99% { opacity: 0; transform: translateY(-30px);}
	100% { opacity: 0; }
}
```
我称它为“ fadeOut”，但实际上它首先使框变淡，然后使其淡出并向上移动一点。
进度栏的动画如下所示：
```css
@keyframes runProgress {
	0%	{ width: 0%; background: rgba(255,255,255,0.3); }
	100% { width: 96%; background: rgba(255,255,255,1); }
}
```
我们将宽度动画化为96％(左侧为2％，因此我们也希望其从右侧停止2％)和RGBA值的不透明度。 进度条动画的持续时间将比方框动画的持续时间短一点，因为我们将在稍后启动它(方框需要先淡入淡出)。
注意：我认为不错，是在悬停时暂停了动画。 如果用户想花更多时间阅读通知中的内容，则这是有道理的。 但是不幸的是，WebKit浏览器似乎存在一些问题。 在Chrome浏览器(Win上为19.0.1084.56)上，动画中断，而在Safari浏览器(5.1.5 Win下)下，我收到了WebKit2WebProcess.exe的崩溃报告…在Firefox> 12.0上运行良好。
无论如何，这是您可以执行的操作：
```css

.tn-box.tn-box-hoverpause:hover, 
.tn-box.tn-box-hoverpause:hover .tn-progress{
	animation-play-state: paused;
}
```
这仅在支持CSS动画的浏览器中有效！ 对于其他浏览器，您将需要某种JS回退。
就这样！ 希望对你有帮助！

web299.com

CSS动画的定时通知

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果