splitting+gsap实现文字图片分割飞入动画效果代码
代码语言:html
所属分类:动画
代码描述:splitting+gsap实现文字图片分割飞入动画效果代码
代码标签: splitting gsap 文字 图片 分割 飞入 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting-cells.css"> <style> body { background: #d9b19a; padding: 40px 10vw; } .grid-container { display: grid; grid-template: repeat(6, [row] 1fr)/repeat(12, [col] 1fr); grid-gap: 20px; max-width: 650px; margin: 0 auto; overflow: hidden; min-height: 90vh; } .item-1, .item-2 { align-items: center; justify-items: center; line-height: 1; color: white; display: flex; } .item-1 { grid-column: col 2/span 7; grid-row: row 2/span 4; z-index: 2; } @media (max-width: 700px) { .item-1 { grid-column: col 2/span 11; grid-row: row 1/span 3; } } .item-2 { grid-column: col 5/span 8; grid-row: row 1/span 6; z-index: 1; } @media (max-width: 700px) { .item-2 { grid-column: col 1/14; grid-row: row 2/7; } } img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.95); visibility: hidden; max-height: calc(90vh - 40px); } @media (max-width: 700px) { img { height: 100%; max-height: 100%; } } h1 { font-size: 3rem; font-family: termina, sans-serif; text-transform: lowercase; overflow: hidden; display: block; line-height: 1.1; } h1 span { visibility: hidden; } </style> </head> <body> <div cl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0