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

問題描述

之前問過了這個類似問題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; }}回答2：

CSS animation, JS setInterval定時添加class類名，然后移除類名

可以試試讓99-100%時把元素給向內旋轉成一條線，迅速飛回去，形成錯覺

看看這個很厲害哦

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