文章詳情頁
javascript - 小demo：請教怎么做出類似于水滴不斷擴張的效果？
瀏覽：263日期：2023-01-07 13:23:32
問題描述
<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什么的都不需要了
標簽：
JavaScript
相關文章：
1. 我在centos容器里安裝docker，也就是在容器里安裝容器，報錯了？2. docker不顯示端口映射呢？3. docker-machine添加一個已有的docker主機問題4. golang - 用IDE看docker源碼時的小問題5. docker-compose中volumes的問題6. 在windows下安裝docker Toolbox 啟動Docker Quickstart Terminal 失敗！7. docker內創建jenkins訪問另一個容器下的服務器問題8. javascript - 最近用echarts做統計圖時遇到兩個問題！！9. docker容器呢SSH為什么連不通呢？10. mac里的docker如何命令行開啟呢？
排行榜
網公網安備