淺談css中漸層銜接

標籤：animation   jpg   --   如何   tran   log   ram   image   ext   

無論transition還是keyframes，如何讓變化更自然，這是前端應該考慮的問題。

 

這裡，我簡單總結下自己的方法。

 

以實踐為例子。

1。映像漸層

@keyframes looppic{    from{        background:url(http://www.005.tv/uploads/allimg/160727/16-160HG44240938.png);        }    25%{        background:url(http://b.zol-img.com.cn/sjbizhi/images/8/750x530/1422008118352.jpg);        }    75%{        background:url(http://img3.duitang.com/uploads/item/201506/11/20150611192600_Stxhe.png);        }    to{        background:url(http://www.005.tv/uploads/allimg/160727/16-160HG44240938.png);

       } 
   } 

.keyframeslp{ width:400px; height:200px; -webkit-animation:looppic 6s ease-in infinite; -moz--animation:looppic 6s ease-in infinite; -o--animation:looppic 6s ease-in infinite; -ms--animation:looppic 6s ease-in infinite; }

 

 效果如下：

 

 

2.色彩坡形

代碼如下

@keyframes opa{    from{        opacity:1}        10%{            opacity:0.75}            20%{                opacity:0.5}                30%{                    opacity:0.25;                    content:text content;                    color:#000000;}                    40%{                        opacity:0}                        50%{                            opacity:0.25}                            68%{                                opacity:0.5}                                85%{                                    opacity:0.75}                                    to{                                        opacity:1}                        }.bc{    background:#F10E12;    width:100px;    height:100px;    -webkit-animation:opa 5s ease-in-out infinite;    -o-animation:opa 5s ease-in-out infinite;    -ms-animation:opa 5s ease-in-out infinite;;    -moz-animation:opa 5s ease-in-out infinite;    }

 

效果如下

 

 

 

ok ,相信大家已經看出了其中的技巧：對稱設定

(很奇怪，發布後為什麼沒有效果了呢？？？？)

淺談css中漸層銜接