gsap实现clipath交错动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap实现clipath交错动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0 } .section { display: flex; height: 100vh; justify-content: center; align-items: center; background-color: hsla(0, 0.00%, 11.33%, 1.00); } .box { width: 50%; height: 50%; justify-content: center; align-items: center; /* background-color: hsla(0, 0.00%, 76.67%, 1.00); */ background-image: url(//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png); background-position: 50%; background-size: cover; } .overlay { width: 100%; height: 100%; /* background-color: hsla(105, 83.67%, 21.41%, 1.00); */ background-image: url(//repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png); background-position: 50%; background-size: cover; clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); } /* x values 0% 14.2857% 28.5714% 42.8571% 57.1429% 71.4286% 85.7143% 100% */ </style> </head> <body translate="no"> <div class="section"> <div class="box"> <div class="overlay"> </div> </div> </div> <script type="text/javascript&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0