css - 如何讓圖片像雲(yún)一樣的行為?
問題描述
之前問過了這個(gè)類似問題https://segmentfault.com/q/10...是如何讓他能來回走動(dòng)
.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}}
現(xiàn)在想問的是如何讓它像雲(yún)一樣,讓圖慢慢移動(dòng)後,消失?然後在原本那一端再出現(xiàn)一次圖,不斷循環(huán)?
問題解答
回答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; }}
其實(shí)加上透明就行了,動(dòng)畫內(nèi)的樣式是可以有多個(gè)的。然後根據(jù)你的意思是不是直接寫成下面的就可以了?
@keyframes imgMove { 0% {right: 150px;opacity: 1; } 100% {right: 50px;opacity: 0; }}回答2:
CSS animation, JS setInterval定時(shí)添加class類名,然后移除類名
回答3:可以試試讓99-100%時(shí)把元素給向內(nèi)旋轉(zhuǎn)成一條線,迅速飛回去,形成錯(cuò)覺
回答4:看看這個(gè)很厲害哦
http://www.17sucai.com/previe...
相關(guān)文章:
1. node.js - mysql如何通過knex查詢今天和七天內(nèi)的匯總數(shù)據(jù)2. mysql 插入數(shù)值到特定的列一直失敗3. 360瀏覽器與IE瀏覽器有何區(qū)別???4. Python從URL中提取域名5. mysql - 百萬(wàn)行的表中是否盡量避免使用update等sql語(yǔ)句?6. python - 在使用Pycharm時(shí)經(jīng)常看到如下的樣式,小括號(hào)里紅色的部分是什么意思呢?7. javascript - 新浪微博網(wǎng)頁(yè)版的字?jǐn)?shù)限制是怎么做的8. 怎么在網(wǎng)頁(yè)中設(shè)置圖片進(jìn)行左右滑動(dòng)9. javascript - 豆瓣的這個(gè)自適應(yīng)是怎么做的?10. javascript - 用jsonp抓取qq音樂總是說回調(diào)函數(shù)沒有定義
