js閃爍效果
其中.warn是需要閃爍的class,通過改變透明度實現閃爍效果,但是本方法僅適用於火狐瀏覽器,ie瀏覽器就不相容,因此找了方法二,二者都相容
.warn{
-webkit-animation: twinkling 1s infinite ease-in-out
}
.animated{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes twinkling{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
@keyframes twinkling{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
方法二:
.warn
{
background-color:red;
animation:mymove 1s infinite;
-webkit-animation:mymove 1s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
相關文章
- Flutter——實現閃爍效果Flutter
- js點選div實現閃爍效果程式碼例項JS
- css3實現動畫閃爍效果CSSS3動畫
- CSS3文字閃爍效果CSSS3
- [譯] 在 Flutter 中實現微光閃爍效果Flutter
- vuejs在解析時出現閃爍的原因及防止閃爍的方法VueJS
- 教你如何用WPF實現文字粒子閃爍動畫效果動畫
- javascript實現的div塊閃爍效果程式碼例項JavaScript
- openlayers通過overlayhtml5css3設定圖示閃爍效果HTMLCSSS3
- vue頁面渲染是閃爍{{}}Vue
- 實現閃爍燈星星動畫動畫
- QT 讓工作列圖示閃爍QT
- HTML5-canvas動畫閃爍分析HTMLCanvas動畫
- windows10桌面閃爍怎麼辦_windows10桌面閃爍無法使用修復方法Windows
- Canvas繪製星光閃爍的生日祝福Canvas
- fcpx影片去閃爍外掛:Remove FlickeREM
- Arduino 初級使用 單LED等閃爍UI
- FCPX外掛:視訊去閃爍消除頻閃工具Remove FlickeREM
- PR預設-70個轉場抖動發光閃爍變焦效果 Premiere Pro Preset FXREM
- 協程實現canvas影像隨機閃爍Canvas隨機
- Openlayers利用原生Canvas繪製閃爍樣式Canvas
- RecyclerView使用,優化,條目閃爍問題View優化
- Windows 7下讓閃爍游標變粗Windows
- win10工作列閃爍重新整理怎麼辦 win10工作列閃爍重新整理的方法Win10
- jQuery 項卡標題欄閃爍提示新資訊jQuery
- jQuery夜晚天空滿天星星閃爍動畫程式碼jQuery動畫
- Linux下紅色閃爍檔案問題Linux
- win10系統下玩紅警2遊戲滑鼠閃爍一閃一閃如何解決Win10遊戲
- canvas簡單動畫案例(圓圈閃爍漸變動畫)Canvas動畫
- vue渲染時閃爍{{}}的問題及解決方法Vue
- WinForm 載入自定義控制元件閃爍問題ORM控制元件
- 從《閃爍之光》看遊戲設計的統一性遊戲設計
- ngCloak實現angular初始化閃爍最佳實踐GCAngular
- 我的部落格--群星閃爍地球旋轉動畫特效動畫特效
- Beaglebone Black教程專案1閃爍板載LED
- 1(5)led燈閃爍、常見ip核介紹
- RevisionFX DEFlicker(ae視訊去閃爍修復外掛)
- webstorm 底部一直在閃爍顯示indexingWebORMIndex