跟屁球（可复制源代码）
小球会跟着鼠标移动，很有趣的效果。
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跟屁球</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
html,body{width:100%;height:100%;background:#202022;overflow:hidden}*{position:absolute;user-select:none}
</style>
</head>
<body>
<div class="ball">
<div class="marble">
<img class="lighting lighting1" draggable="false" src="https://assets.codepen.io/721952/marbleLighting.png"
width="120" height="120">
<img class="lighting lighting2" draggable="false" src="https://assets.codepen.io/721952/marbleLighting.png"
width="120" height="120">
</div>
<div class="shadow"></div>
</div>
</body>
<script>
gsap.timeline().set('.ball',{scale:0.5,width:100,height:100,borderRadius:'50%',xPercent:-50,yPercent:-50}).set('.marble',{background:'url("https://assets.codepen.io/721952/marble.jpg") center',width:'100%',height:'100%',borderRadius:'50%',overflow:'hidden'}).set('.lighting',{left:'50%',top:'50%',xPercent:-50,yPercent:-50}).set('.lighting2',{mixBlendMode:'multiply',opacity:0.7}).set('.lighting1',{mixBlendMode:'overlay'}).set('.shadow',{width:'100%',height:'100%',scaleX:2.2,background:'radial-gradient(circle at 50% 60%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%)'}).from('.ball',{autoAlpha:0,duration:0.5});let pos={x:window.innerWidth/2,y:window.innerHeight+500};let mouse={x:pos.x,y:window.innerHeight/2};let speed=0.05;let xSet=gsap.quickSetter(".ball","x","px");let ySet=gsap.quickSetter(".ball","y","px");let bgSet=gsap.quickSetter(".marble","backgroundPosition","");let lightRotSet=gsap.quickSetter(".lighting","rotation","deg");let lightYSet=gsap.quickSetter(".lighting","y","px");window.addEventListener("mousemove",e=>{mouse.x=e.x;mouse.y=e.y;});gsap.ticker.add(()=>{pos.x+=(mouse.x-pos.x)*speed;pos.y+=(mouse.y-pos.y)*speed;xSet(pos.x);ySet(pos.y);bgSet(pos.x+'px '+pos.y+'px');lightRotSet(-80+60*pos.x/window.innerWidth);lightYSet(-6+17*pos.y/window.innerHeight);gsap.set('.shadow',{x:35-70*pos.x/window.innerWidth,scaleY:0.2+0.3*pos.y/window.innerHeight,y:50-7*pos.y/window.innerHeight})});
</script>
</html>当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »