css - 如何讓圖片像雲一樣的行為？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css - 如何讓圖片像雲一樣的行為？

黄舟 2017-04-17 11:56:48

[CSS3讨论组]

609

之前問過了這個類似問題
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}
}

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

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全部回复(4)

PHPz2017-04-17 11:58:48 4楼

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

赞 +0

添加回复

PHPz2017-04-17 11:58:48 3楼

CSS animation, JS setInterval
定时添加class类名，然后移除类名

赞 +0

添加回复

黄舟2017-04-17 11:58:48 2楼

可以试试让99-100%时把元素给向内旋转成一条线，迅速飞回去，形成错觉

赞 +0

添加回复

黄舟2017-04-17 11:58:48 1楼

看看这个很厉害哦

http://www.17sucai.com/previe...

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>