亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

小demo:請教怎么做出類似于水滴不斷擴張的效果?

小demo:請教怎么做出類似于水滴不斷擴張的效果?

拉風的咖菲貓 2018-11-13 13:14:38
<style>    #drop{        width:300px;        height:300px;        border-radius:300px;        border:1px solid #000;        margin:180px auto 0;    }</style>    <div id="drop"></div>        drop.timer = setInterval(function(){        drop.style.cssText = `transition:1s;                                transform:scale(1.4);                                opacity:0;                                transform-origin: 150px 150px;                            `;    },500);    現在我能做到的只是完成一次。但是我想要一直往復循環這個過程,從小到大,從清晰到模糊,然后下一次再重復這個步驟,一直不停的循環。有沒有好的實現思路,請教大家!謝謝!
查看完整描述

1 回答

?
藍山帝景

TA貢獻1843條經驗 獲得超7個贊

用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;              

    }                            

}

<div id="drop"></div>

JS什么的都不需要了


查看完整回答
反對 回復 2018-12-07
  • 1 回答
  • 0 關注
  • 472 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號