css3動畫
問題描述
我想讓他的border在2s內閃動2種顏色沒反映,這要怎么寫?
<!DOCTYPE html><html lang='en'> <head><meta charset='utf-8'><meta name='description' content='Creating Modal Window with Twitter Bootstrap'> </head> <style> @keyframes borderbg { 0% {border: 1px solid red !important;} 25% {border: 1px solid #c0ccda !important;} 50% {border: 1px solid red !important;} 100% {border: 1px solid #c0ccda !important;}}@-moz-keyframes borderbg { 0% {border: 1px solid red !important;} 25% {border: 1px solid #c0ccda !important;} 50% {border: 1px solid red !important;} 100% {border: 1px solid #c0ccda !important;}}@-webkit-keyframes borderbg { 0% {border: 1px solid red !important;} 25% {border: 1px solid #c0ccda !important;} 50% {border: 1px solid red !important;} 100% {border: 1px solid #c0ccda !important;}}@-o-keyframes borderbg { 0% {border: 1px solid red !important;} 25% {border: 1px solid #c0ccda !important;} 50% {border: 1px solid red !important;} 100% {border: 1px solid #c0ccda !important;}}.cl-Input p{ width: 200px; height: 200px; border:1px solid #ccc; animation: borderbg 2s; -moz-animation: borderbg 2s; -webkit-animation: borderbg 2s; -o-animation: borderbg 2s; margin: 20px;}</style> <body><p class='cl-Input'> <p class='el-input__inner'> </p> <p class='el-textarea__inner'> </p> <p class='note-frame'> </p></p> </body> <script> </script></html>
問題解答
回答1:你后面加了!important,顏色就不會變了。去了試試
回答2:去掉!important就可以了。加這么多!important是做什么?沒看懂~!important一般不建議使用的吧~
相關文章:
1. java固定鍵值轉換,使用枚舉實現字典?2. javascript - 移動端開發 H5 頁面在 iOS手機上無法實現 長按復制文本 求解決3. 如何解決tp6在zend中無代碼提示4. java - HTTPS雙向認證基礎上有無必要再進行加簽驗簽?5. vim - win10無法打開markdown編輯器6. html - 如何使用用戶輸入的數據去運行一個數學公式,最后怎么返回。7. python - flask學習,user_syy添加報role is invalid keyword for User.8. 這是什么情況???9. css3 - less或者scss 顏色計算的知識應該怎么學?或者在哪里學?10. javascript - 有沒有類似高鐵管家的時間選擇插件
