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. javascript - sublime快鍵鍵問題2. javascript - immutable配合react提升性能?3. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~4. javascript - nodejs關于進程間發送句柄的一點疑問5. Apache 已經把網站根目錄的改為allow from all了,但是服務器還是不能訪問?6. 實現bing搜索工具urlAPI提交7. 配置Apache時,添加對PHP的支持時語法錯誤8. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化9. javascript - 移動端上不能實現拖拽布局嗎?10. phpstudy8.1支持win11系統嗎?

網公網安備