javascript - 小demo：请教怎么做出类似于水滴不断扩张的效果？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 小demo：请教怎么做出类似于水滴不断扩张的效果？

黄舟 2017-04-17 15:18:52

[HTML讨论组]

543

<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)

迷茫2017-04-17 15:20:52 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什么的都不需要了

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>