无论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; }
效果如下:
.keyframeslp { width: 400px; height: 200px }
img { width: 200px; height: 100px }
.keyframeslp { width: 400px; height: 200px }
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; }
效果如下
.bc { background: #F10E12; width: 100px; height: 100px }
ok ,相信大家已经看出了其中的技巧:对称设置
(很奇怪,发布后为什么没有效果了呢????)
时间: 2024-08-27 07:00:26