當前位置：
首頁 >
css实现简单的告警提示动画效果
發(fā)布時間：2023/12/2
47
豆豆
生活随笔
收集整理的這篇文章主要介紹了
css实现简单的告警提示动画效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
需求：css實現(xiàn)簡單的告警提示動畫效果，當接收到實時信息的時候，頁面彈出告警信息的動畫效果
<html lang="en"><head><meta charset="UTF-8"><title>css實現(xiàn)告警提示動畫</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后前端妹子，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。
公眾號回復“1”，拉你進程序員技術討論群.
轉載于:https://www.cnblogs.com/ting6/p/9726101.html
總結
以上是生活随笔為你收集整理的css实现简单的告警提示动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《旺达幻视》临时演员称被强制进行全身扫描
- 下一篇： java项目中Classpath路径到底