纯css闪烁效果demo
<! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < meta http-equiv="X-UA-Compatible" content="IE=edge"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < title >Document</ title > < style > @keyframes test { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; } } @-webkit-keyframes test { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; } } .container-box { position: relative; } .header-box { color: #fff; padding: 10px; font-size: 15px; height: 300px; background-color: rgba(146, 139, 139, .8); animation: test 1000ms infinite; -webkit-animation: test 1000ms infinite; } </ style > </ head > < body > < div class="container-box"> < div class="header-box"> </ div > </ div > </ body > </ html > |
效果:
分类:
css
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库