js实现滚动过渡撕开动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:js实现滚动过渡撕开动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap"); body { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 4000px; font-family: "Pacifico", cursive; font-size: 2rem; } .title { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(3vw, 10vw, 5rem); mix-blend-mode: difference; color: #f2f2f2; text-align: center; line-height: 1.3; } .curtain { position: fixed; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; background-color: #222; display: flex; } .curtain span { width: 100%; height: 100%; background-color: #f1f1f1; transform: scale(1.05, 1.05); transform-origin: 0 50%; } </st.........完整代码请登录后点击上方下载按钮下载查看
网友评论0