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}}
現在想問的是如何讓它像雲一樣,讓圖慢慢移動後,消失?然後在原本那一端再出現一次圖,不斷循環?
問題解答
回答1:@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類名,然后移除類名
回答3:可以試試讓99-100%時把元素給向內旋轉成一條線,迅速飛回去,形成錯覺
回答4:看看這個很厲害哦
http://www.17sucai.com/previe...
相關文章:
1. 注冊賬戶文字不能左右分離2. html - vue項目中用到了elementUI問題3. 對mysql某個字段監控的功能4. javascript - table列過多,有什么插件可以提供列排序和選擇顯示列的功能5. JavaScript事件6. python - 使用readlines()方法讀取文件內容后,再用for循環遍歷文件與變量匹配時出現疑難?7. showpassword里的this 是什么意思?代表哪個元素8. html5 - ElementUI table中el-table-column怎么設置百分比顯示。9. python - 為什么正常輸出中文沒有亂碼,zip函數之后出現中文編程unicode編碼的問題,我是遍歷輸出的啊。10. javascript - ES6標準入門中let命令提到的for循環打印i是10,如果不用let怎么替換?
