css实现简单的告警提示动画效果
需求：css实现简单的告警提示动画效果，当接收到实时信息的时候，页面弹出告警信息的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css实现告警提示动画</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<style>
.container {
width: 200px;
height: 200px;
border:1px solid #CCCCCC;
position: absolute;
left: 40%;
top: 40%;
}
.delete{
text-align: right;
margin-right: 4px;
}
.type {
text-align: center;
}
.ico {
position: absolute;
left: 20%;
top: 29%;
width: 120px;
height: 120px;
background: url(img/211.png) no-repeat center;
background-size: 100%;
}
/*动画*/
.ico {
-webkit-animation: Tada 1s 2s both infinite;
-moz-animation: Tada 1s 2s both infinite;
-ms-animation: Tada 1s 2s both infinite;
animation: Tada 1s 2s both infinite;
}
/*浏览器兼容性部分略过*/
@keyframes Tada {
0% {
transform: scale(1);
transform: scale(1)
}
10%,
20% {
transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
}
30%,
50%,
70%,
90% {
transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
}
40%,
60%,
80% {
transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
}
100% {
transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
}
</style>
</head>
<body>
<div class="container">
<div class="delete">
<img src="img/delete.png">
</div>
<div class="type">健康报警
</div>
<div class="ico"></div>
</div>
</body>
<script>
$(".delete").on("click",function(){
$('.container').hide();
});
</script>
</html>
效果如下：
注：
原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。
公众号回复“1”，拉你进程序员技术讨论群.
css实现简单的告警提示动画效果的更多相关文章
- 用HTML和CSS实现WWDC 2015上的动画效果
用HTML和CSS实现WWDC 2015上的动画效果 动画效果WWDC 2015 原文:https://cssanimation.rocks/wwdc15/ 译者:周晓楷(@Helkyle) 每年 ...
- 简单的UIButton按钮动画效果iOS源码
这个是简单的UIButton按钮动画效果案例,源码,简单的UIButton按钮动画,可以自定义button属性. 效果图: <ignore_js_op> 使用方法: 使用时把ButtonA ...
- Mono For Android中简单实现按钮的动画效果
Android中动画的分Tween Animation和Frame Animation,本节主要讲Tween Animation的实现. 一般是通过XML文件来定义动画的,具体如下: 1.在项目res ...
- 原生html，css+js写下载按钮有提示动画效果的落地页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- css 实现水波纹，波浪动画效果
<div class="wave"> 水波纹效果 <div class="wave1"></div> <div cla ...
- CSS笔记 - fgm练习 2-10 - 提示框效果 （清除子元素浮动高度塌陷的影响）
CSS清除浮动方法参考: https://blog.csdn.net/promiseCao/article/details/52771856 <style> *{ margin: 0; p ...
- CSS3 transition实现超酷图片墙动画效果
一.前面的感慨以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等.但都是试试而已,知道有这么回事.今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了,我傻了, ...
- css3中outline切换动画效果
今天刚看了篇文章<纯CSS实现的outline切换transition动画效果> 里面的效果研究了一下,下图为实现时的效果 代码如下: <!DOCTYPE html> < ...
- 使用jQuery做简单的图片轮播效果
一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...
随机推荐
- DEDE 修改后台图集上传单个图片的大小限制
默认情况下,DEDE图集中单个图片大小限制在2M以内,而有时我们需要上传一个2M以上的文件,这是只要修改几个文件就可以实现了. 一.需要修改php.ini这个文件,我们必须保证PHP的配置中允许上传一 ...
- 分享《Python 游戏编程快速上手(第3版)》高清中文版PDF+高清英文版PDF+源代码
通过编写一个个小巧.有趣的游戏来学习Python,通过实例来解释编程的原理的方式.14个游戏程序和示例,介绍了Python基础知识.数据类型.函数.流程控制.程序调试.流程图设计.字符串操作.列表和字 ...
- Idea下mybatis的错误—Module not specified
IDEA下使用maven的mybatis常见错误 错误类型一:导入项目引起的错误Module not specified 错误提示:idea Error Module not specified. 错 ...
- BRep Shapes Based on Tessellated Geometry
BRep Shapes Based on Tessellated Geometry eryar@163.com Key Words. BRep Shape, Tessellated Geometry, ...
- OpenCascade Sweep Algorithm
OpenCascade Sweep Algorithm eryar@163.com Abstract. Sweeps are the objects you obtain by sweeping a ...
- Web跨域问题基础
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只 ...
- Impala的优缺点
不多说,上干货! 优点: 支持SQL查询,快速查询大数据. 可以对已有数据进行查询,减少数据的加载,转换. 多种存储格式可以选择(Parquet, Text, Avro, RCFile, Sequee ...
- Fragment-传递参数
在关Fragment间参数的传递,有两种情况: 第一种情况:同一个container中不同fragment间的参数传递.这种情况一般发生在fragment跳转时,上一个Fragment将参数传递给下一 ...
- js获取单选button的值
<!DOCTYPE html> <html> <body> <script type="text/javascript"> func ...
- C语言之文件操作06——写数据到文本文件遇0停止
//文件 /* =============================================================== 题目:输入10个篮球运动员的身高数据(cm)保存至D盘文 ...