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. python執行cmd命令,怎么讓他執行類似Ctrl+C效果將其結束命令?3. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)4. ios - 類似微博首頁,一張圖的時候是如何確定圖大小的?5. 實現bing搜索工具urlAPI提交6. Python中使用超長的List導致內存占用過大7. javascript - 我是做web前端的,公司最近有一個項目關于數據統計的!8. python - Django有哪些成功項目?9. 鏈接圖片時,鏈接不成功10. node.js - 微信小程序websocket連接問題
