kokomi+three+gsap实现webgl三维图片圆墙图文展示交互效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：kokomi+three+gsap实现webgl三维图片圆墙图文展示交互效果代码，点击可拖动圆圈内的图片显示文本。

代码标签： kokomi three gsap webgl 三维图片圆墙图文展示交互

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/aqua.css">
  
<style>
body {
    margin: 0;
    overflow: hidden;
}

#sketch {
    width: 100vw;
    height: 100vh;
    background: black;
}

body {
    user-select: none;
}

.loading span {
    animation: blur 1.5s calc(var(--i) / 5 * 1s) alternate infinite;
}

@keyframes blur {
    to {
        filter: blur(2px);
    }
}

#sketch {
    position: fixed;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: black;
}

.gallery {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}

.gallery .gallery-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22rem;
    height: 10rem;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.hello-text {
    overflow: hidden;
}

.hello-text .char {
    display: inline-block;
}

.pulse {
    --pulse-width: 2.25rem;
    --pulse-color: white;
    --pulse-border-width: 1px;

    position: relative;
    width: var(--pulse-width);
    height: var(--pulse-width);
}

.pulse::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    box-shadow: 0 0 0 var(--pulse-border-width) var(--pulse-color);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    50% {
        opacity: 1;
    }

    to {
        transform: scale(1.2);
    }
}

.enlarge-click-area {
    position: relative;
}

.enlarge-click-area::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(2);
}

canvas.-candrag {
    cursor: grab;
}

canvas.-dragging {
    cursor: grabbing;
}

.slide-in-line {
    overflow: hidden;
}

.btn {
    --hue: 190;
    --ease-in-duration: 0.25s;
    --ease-in-exponential: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --ease-out-duration: 0.65s;
    --ease-out-delay: var(--ease-in-duration);
    --ease-out-exponential: cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    padding: 1rem 3rem;
    font-size: 1rem;
    line-height: 1.5;
    color: white;
    text-decoration: none;
    background-color: hsl(var(--hue), 100%, 41%);
    border: 1px solid hsl(var(--hue), 100%, 41%);
    outline: transparent;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: 0.25s;
    transition-property: transform, opacity;
}

.btn:hover {
    background: hsl(var(--hue), 100%, 31%);
}

.btn-primary {
    --hue: 60;
}

.btn-ghost {
    color: hsl(var(--hue), 100%, 41%);
    background-color: transparent;
    border-color: hsl(var(--hue), 100%, 41%);
}

.btn-ghost:hover {
    color: white;
}

.btn-border-stroke {
    border-color: hsla(var(--hue), 100%, 41%, 0.35);
}

.btn-border-stroke .btn-borders {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btn-border-stroke .btn-borders .border-top {
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    background: hsl(var(--hue), 100%, 41%);
    transform: scaleX(0);
    transform-origin: left;
}

.btn-border-stroke .btn-borders .border-right {
    position: absolute;
    right: 0;
    width: 1px;
    height: 100%;
    background: hsl(var(--hue), 100%, 41%);
    transform: scaleY(0);
    transform-origin: bottom;
}

.btn-border-stroke .btn-borders .border-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: hsl(var(--hue), 100%, 41%);
    transform: scaleX(0);
    transform-origin: left;
}

.btn-border-stroke .btn-borders .border-left {
    position: absolute;
    left: 0;
    width: 1px;
    height: 100%;
    background: hsl(var(--hue), 100%, 41%);
    transform: scaleY(0);
    transform-origin: bottom;
}

.btn-border-stroke .btn-borders .border-left {
    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}

.btn-border-stroke .btn-borders .border-bottom {
    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}

.btn-border-stroke .btn-borders .border-right {
    transition: var(--ease-in-duration) var(--ease-in-exponential);
}

.btn-border-stroke .btn-borders .border-top {
    transition: var(--ease-in-duration) var(--ease-in-exponential);
}

.btn-border-stroke:hover {
    color: hsl(var(--hue), 100%, 41%);
    background: transparent;
}

.btn-border-stroke:hover .border-top,
.btn-border-stroke:hover .border-bottom {
    transform: scaleX(1);
}

.btn-border-stroke:hover .border-left,
.btn-border-stroke:hover .border-right {
    transform: scaleY(1);
}

.btn-border-stroke:hover .border-left {
    transition: var(--ease-in-duration) var(--ease-in-exponential);
}

.btn-border-stroke:hover .border-bottom {
    transition: var(--ease-in-duration) var(--ease-in-exponential);
}

.btn-border-stroke:hover .border-right {
    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}

.btn-border-stroke:hover .border-top {
    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}

.btn-text-float-up::after {
    position: absolute;
    content: attr(data-text);
    top: 0;
    left: 0;
    wi.........完整代码请登录后点击上方下载按钮下载查看