首页 > 开发 > CSS > 正文

如何讓圖片像雲一樣的行為?

2017-09-12 09:34:54  来源: 网友分享

之前問過了這個類似問題
https://segmentfault.com/q/10...
是如何讓他能來回走動

.img-move{    animation:imgMove 4s linear infinite;    -moz-animation:imgMove 4s linear infinite;    -webkit-animation:imgMove 4s linear infinite;    -o-animation:imgMove 4s linear infinite;    position: absolute;}@keyframes imgMove{0%   {right:100px;}25%{right:150px;}50%{right:100px;}75%{right:50px}100% {right:100px}}

現在想問的是
如何讓它像雲一樣,讓圖慢慢移動後,消失?
然後在原本那一端再出現一次圖,不斷循環?

解决方案

@keyframes imgMove {    0% {        right: 100px;        opacity: 0.5;    }    25% {        right: 150px;        opacity: 1;    }    50% {        right: 100px;        opacity: 0.5;    }    75% {        right: 50px;        opacity: 0;    }    100% {        right: 100px;        opacity: 1;    }}

其實加上透明就行了,動畫內的樣式是可以有多個的。
然後根據你的意思是不是直接寫成下面的就可以了?

@keyframes imgMove {    0% {        right: 150px;        opacity: 1;    }    100% {        right: 50px;        opacity: 0;    }}