文章详情页

css3动画

浏览：252日期：2023-06-29 16:39:28

问题描述

我想让他的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一般不建议使用的吧~

CSS

上一条：css3 - 这个形状使用CSS怎么写出来？下一条：这样的下三角气泡框用纯css3如何实现

相关文章：

1. javascript - RN项目iOS端真机测试账号无法登录！2. javascript - mongodb怎么设置用户的账户不重复？3. javascript - "CommonsChunkPlugin now only takes a single argument.。。。。4. css - transition 的使用?5. redis sentinel怎么跑守护进程以及日志记录位置的？6. python 字符串匹配问题7. 请问各位java自带类的一些问题8. Discuz! Q 有人用过吗?9. mysqld无法关闭10. Python异常退出时保存进度？