gsap实现炫酷水晶球幻灯片切换效果
代码语言:html
所属分类:幻灯片
代码描述:gsap实现炫酷水晶球幻灯片切换效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap'> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; background-color: #20303e; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; overflow: hidden; font-family: "Ubuntu", sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } *, *::after, *::before { box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; cursor: none; } main { width: 85vw; height: 80vh; box-shadow: 0 16px 18px rgba(22, 35, 43, 0.19); -webkit-transform: rotate(0); transform: rotate(0); } main .bg { width: 100%; height: 100%; position: relative; overflow: hidden; } main .bg-main { width: 100%; height: 100%; position: relative; } main .bg-main-img { width: 100%; height: 100%; position: relative; background-image: var(--img); background-size: cover; background-position: center; } main .bg-circle { width: 32vmin; height: 32vmin; overflow: hidden; -webkit-clip-path: circle(16vmin at center); clip-path: circle(16vmin at center); } main .bg-circle-wrapper { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; position: absolute; top: 0; width: 100%; height: 100%; z-index: 10; } main .bg-circle-img { width: 100%; height: 100%; -webkit-clip-path: circle(16vmin at center); clip-path: circle(16vmin at center); position: relative; -webkit-transform: rotate(0); transform: rotate(0); } main .bg-circle-img::after { content: ''; position: fixed; width: 85vw; height: 80vh; display: block; background-image: var(--img); top: calc(-40vh + 16vmin); left: calc(-85vw / 2 + 16vmin); background-size: cover; background-position: center; } main .bg::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(39, 108, 190, 0.33); mix-blend-mode: exclusion; z-index: 20; } .cursor { width: 8px; height: 8px; border-radius: 50%; background: #eae3cf; mix-blend-mode: hard-light; position: fixed; z-index: 999; pointer-events: none; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; top: -30px; left: -30px; } .cursor-f { position: fixed; border-radius: 50%; border: 1px dashed #eae3cf; width: 30px; height: 30px; pointer-events: none; -webkit-animation: spin 2.6s linear infinite paused; animation: spin 2.6s linear infinite paused; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; --next: 0; --prev: 0; } .cursor.clicked .cursor-f { background-color: rgba(234, 227, 207, 0.12); } .cursor.hidden { opacity: 0; } .btns { position: fixed; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; right: 0; margin: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; z-index: 999; mix-blend-mode: exclusion; -webkit-transition-duration: 0.6s; transition-duration: 0.6s; } .btns.hidden { opacity: 0; pointer-events: none; } .btns .arrow { display: block; width: 2vmax; height: 1vmax; border: none; background: url("data:image/svg+xml,%3Csvg width='14' height='7' viewBox='0 0 14 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6L7 1L13 6' stroke='%23EAE3CF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center; background-size: 100%; margin: 0.5vmax 0; padding: 1vmax 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .btns .arrow.next { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .btns .arrow.next:hover { -webkit-transform: rotate(180deg) translateY(-4px); transform: rotate(180deg) translateY(-4px); } .btns .arrow.prev:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); } .text { color: rgba(255, 255, 255, 0.65); position: absolute; bottom: 0.4em; font-size: 0.85em; width: 100%; z-index: 999; text-shadow: 1px 1px 0 #75757547; text-align: end; } .text p { margin: 0.6em 0.9em; } .text a { color: rgba(255, 255, 255, 0.44); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); } .text a:hover { padding-bottom: 2px; } .text kbd { width: 13px; height: 13px; border: 1px solid rgba(255, 255, 255, 0.59); display: inline-block; border-radius: 3px; font-size: 0.76em; vertical-align: middle; text-align: center; } </style> </head> <body translate="no"> <main> <div class="bg"> <div class="bg-main"> <div class="bg-main-img"></div> </div> <div class="bg-circle-wrapper"> <div class="bg-circle"> <div class="bg-circle-img"></div> </div> </div> </div> <div class="btns"> <button class="arrow prev" onclick="go('prev')"></button> <button class="arrow next" onclic.........完整代码请登录后点击上方下载按钮下载查看
网友评论0