消息提醒右上角带数字的晃动小铃铛效果
1 .icon-animated-bell { 2 -moz-animation: ringing 3.0s infinite ease 1.0s; 3 -webkit-animation: ringing 3.0s infinite ease 1.0s; 4 -o-animation: ringing 3.0s infinite ease 1.0s; 5 -ms-animation: ringing 3.0s infinite ease 1.0s; 6 animation: ringing 3.0s infinite ease 1.0s; 7 -moz-transform-origin: 50% 0%; 8 -webkit-transform-origin: 50% 0%; 9 -o-transform-origin: 50% 0%; 10 -ms-transform-origin: 50% 0%; 11 transform-origin: 50% 0%; 12 } 13 14 @keyframes ringing { 15 0% { 16 transform: rotate(-15deg); 17 } 18 2% { 19 transform: rotate(15deg); 20 } 21 4% { 22 transform: rotate(-18deg); 23 } 24 6% { 25 transform: rotate(18deg); 26 } 27 8% { 28 transform: rotate(-22deg); 29 } 30 10% { 31 transform: rotate(22deg); 32 } 33 12% { 34 transform: rotate(-18deg); 35 } 36 14% { 37 transform: rotate(18deg); 38 } 39 16% { 40 transform: rotate(-12deg); 41 } 42 18% { 43 transform: rotate(12deg); 44 } 45 20% { 46 transform: rotate(0deg); 47 } 48 } 49
https://blog.csdn.net/song_litao/article/details/84915779
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· Vue3状态管理终极指南：Pinia保姆级教程