tailwind+gsap实现日食线条光线伸缩动画效果代码
代码语言:html
所属分类:动画
代码描述:tailwind+gsap实现日食线条光线伸缩动画效果代码
代码标签: tailwind gsap 日食 线条 光线 伸缩 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.1.js"></script> <style> .line { position: absolute; width: 100%; height: 1px; background-color: #fff; transform-origin: left; place-self: end; } </style> </head> <body translate="no"> <main class="bg-black h-screen grid place-items-center text-white"> <section class="w-[500px] h-[500px] relative"></section> </main> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.12.2.js"></script> <script > document.addEventListener("DOMContentLoaded", () => { const lineContainer = document.querySelector("section"); const radius = Math.min(lineContainer.clientWidth, lineContainer.clientHeight) / 2; const centerX = lineContainer.clientWidth / 2; const centerY = lineContainer.clientHeight / 2; fo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0