首页 > 代码库 > 浅谈css中渐变衔接

浅谈css中渐变衔接

2024-09-17 18:26:44   213人阅读

无论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; }

 

 效果如下：

 

<style>.keyframeslp { width: 400px; height: 200px } img { width: 200px; height: 100px } .keyframeslp { width: 400px; height: 200px }</style>
 


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;
    }

 

效果如下

 

 

<style>.bc { background: #F10E12; width: 100px; height: 100px }</style>
 


ok ,相信大家已经看出了其中的技巧：对称设置

(很奇怪，发布后为什么没有效果了呢？？？？)

浅谈css中渐变衔接


联系
我们