javascript - 小demo:請教怎么做出類似于水滴不斷擴張的效果?
問題描述
<style> #drop{width:300px;height:300px;border-radius:300px;border:1px solid #000;margin:180px auto 0; }</style> <p id='drop'></p>drop.timer = setInterval(function(){drop.style.cssText = `transition:1s;transform:scale(1.4);opacity:0;transform-origin: 150px 150px; `; },500);
現在我能做到的只是完成一次。但是我想要一直往復循環這個過程,從小到大,從清晰到模糊,然后下一次再重復這個步驟,一直不停的循環。有沒有好的實現思路,請教大家!謝謝!
問題解答
回答1:用CSS animation
#drop { width: 300px; height: 300px; border-radius: 300px; border: 1px solid #000; margin: 180px auto 0; transition: 1s; animation: 1s drop infinite; } @keyframes drop { 0% { transform: scale(1); opacity: 1; }100% { transform: scale(1.4); opacity: 0; } }
<p id='drop'></p>
JS什么的都不需要了
相關文章:
1. MySQL中無法修改字段名的疑問2. docker images顯示的鏡像過多,狗眼被亮瞎了,怎么辦?3. Matlab和Python編程相似嗎,有兩種都學過的人可以說說嗎4. 網頁爬蟲 - 用Python3的requests庫模擬登陸Bilibili總是提示驗證碼錯誤怎么辦?5. javascript - 微信小程序封裝定位問題(封裝異步并可能多次請求)6. android - QQ物聯,視頻通話7. 請教各位大佬,瀏覽器點 提交實例為什么沒有反應8. python的前景到底有大?如果不考慮數據挖掘,機器學習這塊?9. javascript - Web微信聊天輸入框解決方案10. mysql - 怎么讓 SELECT 1+null 等于 1
