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. javascript - 循環嵌套多個promise應該如何實現？2. mysql優化 - 關于mysql分區3. css3 - rem布局下，用戶瀏覽器的最小字號是12px怎么辦？4. javascript - ionic2 input autofocus 電腦成功，iOS手機鍵盤不彈出5. html5 - 如何實現帶陰影的不規則容器？6. objective-c - iOS開發支付寶和微信支付完成為什么跳轉到了之前開發的一個app?7. 前端 - IE9 css兼容問題8. 請教各位大佬，瀏覽器點 提交實例為什么沒有反應9. vue.js - vue 打包后 nginx 服務端API請求跨域問題無法解決。10. css - 移動端字體設置問題
網公網安備