js+css实现一个炫酷交互的文字云标签云效果代码-html代码-BFW代码库

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=IBM+Plex+Mono:wght@400;700&display=swap');

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'IBM Plex Mono', monospace;
}

body {
    background: #1b263b;
    color: #778da9;
    cursor: none;
}

#cursor {
    position: fixed;
    top: -16px;
    left: -16px;
    z-index: 1;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: #e0e1dd;
    opacity: 0;
}

#cursor.-activated {
    -webkit-animation: fadeIn 1s ease-out forwards;
            animation: fadeIn 1s ease-out forwards;
}

.tags-cloud {
    position: fixed;
    top: calc(50% - 30vmin);
    left: calc(50% - 30vmin);
    height: 60vmin;
    width: 60vmin;
    list-style: none;
    opacity: 0;
}

.tags-cloud.-loaded {
    -webkit-animation: fadeIn 1s ease-out forwards;
            animation: fadeIn 1s ease-out forwards;
}

.tags-cloud > .tag {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 5vmin;
    font-weight: bold;
    transition: transform .5s linear, opacity .5s linear;
}

.tags-cloud > .tag > .wrap {
    display: inline-block;
    transform: translateX(-50%) translateY(-50%);
}
</style>



</head>

<body  >
  <div id='cursor'></div>

<ul class='tags-cloud'>
    <li class='tag'><span class='wrap'>HTML</span></li>
    <li class='tag'><span class='wrap'>Pug</span></li>
    <li class='tag'><span class='wrap'>CSS</span></li>
    <li class='tag'><span class='wrap'>LESS</span></li>
    <li class='tag'><span class='wrap'>PostCSS</span></li>
    <li class='tag'><span class='wrap'>RSCSS</span></li>
    <li class='tag'><span class='wrap'>SVG</span></li>
    <li class='tag'><span class='wrap'>Javascript</span></li>
    <li class='tag'><span class='wrap'>Gulp</span></li>
    <li class='tag'><span class='wrap'>Webpack</span></li>
    <li class='tag'><span class='wrap'>Canvas</span></li>
    <li class='tag'><span class='wrap'>WebGL</span></li>
    <li class='tag'><span class='wrap'>Three.js</span></li>
    <li class='tag'><span class='wrap'>Anime.js</span></li>
    <li class='tag'><span class='wrap'>Barba.js</span></li>
    <li class='tag'><span class='wrap'>Git</span></li>
    <li class='tag'><span class='wrap'>Linux</span></li>
    <li class='tag'><span class='wrap'>Math</span></li>
</ul>
  
  
      <script  >
class FibonacciSphere {
    #points;

    get points() {
        return this.#points;
    }

    constructor(N) {
        this.#points = [];

        const goldenAngle = Math.PI * (3 - Math.sqrt(5));

        for (let i = 0; i < N; i++) {
            const y = 1 - (i / (N - 1)) * 2;
            const radius = Math.sqrt(1 - y ** 2);
            const a = goldenAngle * i;
            const x = Math.cos(a) * radius;
            const z = Math.sin(a) * radius;

            this.#points.push([x, y, z]);
        }
    }
}


class TagsCloud {
    #root;
    #size;
    #sphere;
    #tags;
    #rotationAxis;
    #rotationAngle;
    #rotationSpeed;
    #frameRequestId;

    .........完整代码请登录后点击上方下载按钮下载查看