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
- CSS3文字閃爍效果CSSS3
- [譯] 在 Flutter 中實現微光閃爍效果Flutter
- css3實現動畫閃爍效果CSSS3動畫
- 教你如何用WPF實現文字粒子閃爍動畫效果動畫
- openlayers通過overlayhtml5css3設定圖示閃爍效果HTMLCSSS3
- vuejs在解析時出現閃爍的原因及防止閃爍的方法VueJS
- c51控制led閃爍
- vue頁面渲染是閃爍{{}}Vue
- QT 讓工作列圖示閃爍QT
- Arduino 初級使用 單LED等閃爍UI
- fcpx影片去閃爍外掛:Remove FlickeREM
- Canvas繪製星光閃爍的生日祝福Canvas
- PR預設-70個轉場抖動發光閃爍變焦效果 Premiere Pro Preset FXREM
- FCPX外掛:視訊去閃爍消除頻閃工具Remove FlickeREM
- 協程實現canvas影像隨機閃爍Canvas隨機
- Openlayers利用原生Canvas繪製閃爍樣式Canvas
- RecyclerView使用,優化,條目閃爍問題View優化
- windows10桌面閃爍怎麼辦_windows10桌面閃爍無法使用修復方法Windows
- win10工作列閃爍重新整理怎麼辦 win10工作列閃爍重新整理的方法Win10
- win10系統下玩紅警2遊戲滑鼠閃爍一閃一閃如何解決Win10遊戲
- vue渲染時閃爍{{}}的問題及解決方法Vue
- RevisionFX DEFlicker(ae視訊去閃爍修復外掛)
- jQuery 項卡標題欄閃爍提示新資訊jQuery
- webstorm 底部一直在閃爍顯示indexingWebORMIndex
- WinForm 載入自定義控制元件閃爍問題ORM控制元件
- 1(5)led燈閃爍、常見ip核介紹
- (4)8個led每0.5s閃爍(跑馬燈)
- 51微控制器程式框架之LED閃爍_方法1框架
- 1、51微控制器實現LED燈的閃爍
- 從《閃爍之光》看遊戲設計的統一性遊戲設計
- canvas簡單動畫案例(圓圈閃爍漸變動畫)Canvas動畫
- Flutter 混合開發實戰問題記錄(一)FlutterView閃爍FlutterView
- 微控制器小白學習之路(四)---led燈的閃爍
- 簡單CSS實現閃爍動畫(+1白話講解)CSS動畫
- Win10電腦怎麼調整游標閃爍速度Win10
- STC89C52以1HZ頻率閃爍LED
- xbox手柄閃爍但是連不上電腦怎麼解決