搜尋

首頁  >  問答  >  主體

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>
黄舟黄舟2783 天前510

全部回覆(2)我來回復

  • 怪我咯

    怪我咯2017-04-17 11:55:44

    你後面加了! important,顏色就不會變了。去了試試

    回覆
    0
  • 阿神

    阿神2017-04-17 11:55:44

    去掉!important就可以了。
    加這麼多!important是做什麼?沒看懂~
    !important一般不建議使用的吧~

    回覆
    0
  • 取消回覆