文章詳情頁
javascript - 小demo：請教怎么做出類似于水滴不斷擴張的效果？
瀏覽：193日期：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. angular.js使用$resource服務把數據存入mongodb的問題。2. angular.js - angularjs的自定義過濾器如何給文字加顏色？3. docker-machine添加一個已有的docker主機問題4. 關于docker下的nginx壓力測試5. 為什么我ping不通我的docker容器呢？？？6. docker - 如何修改運行中容器的配置7. docker安裝后出現Cannot connect to the Docker daemon.8. nignx - docker內nginx 80端口被占用9. docker鏡像push報錯10. Docker for Mac 創建的dnsmasq容器連不上/不工作的問題
排行榜
網公網安備