js+css实现全屏圈圈式图文幻灯片切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:js+css实现全屏圈圈式图文幻灯片切换效果代码,点击右下角的随机按钮进行切换。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,200&display=swap"); :root { --img-current: url(//repo.bfw.wiki/bfwrepo/image/5e83e2a63bb7a.png); --img-next: url(//repo.bfw.wiki/bfwrepo/image/64a4cd81c7470.png); --text-current-title: "Sahara"; --text-next-title: "Maldives"; --text-current-subtitle: "Marrakech"; --text-next-subtitle: "Indian Ocean"; } * { box-sizing: border-box; } body { margin: 0; font-family: sans-serif; text-transform: uppercase; font-weight: 700; font-size: clamp(0.7rem, 1vw, 0.8rem); color: #fff; } a { color: inherit; text-decoration: none; } header, footer { position: fixed; z-index: 50; display: flex; justify-content: space-between; align-items: center; width: 100%; } header > *, footer > * { flex: 1 1 100%; padding: 2rem; } header { top: 0; } footer { bottom: 0; } header > *:nth-child(2), footer > *:nth-child(2) { text-align: center; } header > *:nth-child(3), footer > *:nth-child(3) { text-align: right; } main { position: relative; width: 100vw; height: 100vh; overflow: hidden; } h1, h2 { display: block; text-wrap: nowrap; margin: 0; overflow: hidden; clip-path: inset(0 0 0 0); } h1::before, h2::before { transition-delay: 0.5s; transform: translate(-50%, 0%); } h1 { font-family: "Literata"; font-weight: 200; height: clamp(2rem, 8vw, 4rem); font-size: clamp(2rem, 8vw, 4rem); letter-spacing: clamp(0.5rem, 5vw, 10rem); margin-left: clamp(0.5rem, 5vw, 10rem); } h1::before, h1::after { content: var(--text-current-title); position: absolute; line-height: 1; } h1::after { content: var(--text-next-title); transition-delay: 0.5s; transform: translate(-50%, 100%); } h2 { height: clamp(0.9rem, 2vw, 1.1rem); font-size: clamp(0.9rem, 2vw, 1.1rem); letter-spacing: clamp(0.5rem, 3vw, 5rem); margin-left: clamp(0.5rem, 3vw, 5rem); font-weight: 400; } h2::before, h2::after { content: var(--text-current-subtitle); position: absolute; line-height: 1; } h2::after { content: var(--text-next-subtitle); transition-delay: 0.5s; transform: translate(-50%, -100%); } hr { opacity: 0.3; border: none; height: 2px; background: #fff; } .logo { width: 30px; height: 30px; border-radius: 50%; } .background { position: absolute; top: 50%; left: 50%; width: max(180vw, 180vh); aspect-ratio: 1/1; transform: translate(-50%, -50%); filter: brightness(0.8); } .background::before, .background::after { content: ""; position: absolute; inset: 0; background-size: max(110vw, 110vh) max(110vw, 110vh); background-position: 50%; transition: all 1.5s; transition-timing-function: ease-in-out; } .background::before { background-image: var(--img-current); } .background::after { background-image: var(--img-next); opacity: 0; } .background--2::after { transition-delay: 0.2s; } .background--3::after { transition-delay: 0.4s; } .background--2::before, .background--2::after { clip-path: circle(23%); filter: brightness(0.8); } .background--3::before, .background--3::after { clip-path: circle(13%); } .body--animated .background::before, .body--animated .background::after { animation: rotate ease-in-out 1s forwards; animation-delay: 0.4s; transition-delay: 0.4s; } .body--animated .background--2::before, .body--animated .background--2::after { animation-delay: 0.2s; transition-delay: 0.2s; } .body--animated .background--3::before, .body--animated .background--3::after { animation-delay: 0s; transition-delay: 0s; } .body--animated .background::after { opacity: 1; } .body--animated h1::before, .body--animated h2::before, .body--animated h1::after, .body--animated h2::after { transition-delay: 0.5s; transition-duration: 0.5s; } .body--animated h1:before { transform: translate(-50%, -100%); } .body--animated h1:after { transform: translate(-50%, 0%); } .body--animated h2:before { transform: translate(-50%, 100%); } .body--animated h2:after { transform: translate(-50%, 0%); } .content { position: absolute; top: 50%; left: 50%; width: 95%; text-align: center; transform: translate(-50%, clamp(-2rem, -4vw, -1rem)); } .content hr { max-width: 400px; margin: clamp(1rem, 5vw, 2.5rem) auto; } .randomize { display: flex; justify-content: end; align-items: center; flex-wrap: wrap; cursor: pointer; } .randomize hr { display: inline-block; width: 25px; margin: 0 1vw; } .randomize button { background: #cfd865; width: clamp(2rem, 4vw, 3rem); aspect-ratio: 1/1; border: none; border-radius: 50%; font-size: clamp(1rem, 2vw, 1.5rem); cursor: pointer; } /* animation */ .........完整代码请登录后点击上方下载按钮下载查看
网友评论0