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>
    <l.........完整代码请登录后点击上方下载按钮下载查看