代码 纯CSS实现3D云动画效果

2024-11-18 18:48:05 +0800 CST views 561

纯CSS实现3D云动画效果

这是一个3D标签云动画，纯CSS实现无需JavaScript。这些标签以三维方式排列并旋转，用户悬停某个标签，动画会停止。这种效果适合用于展示技术栈、产品特性或其他信息，既美观又有互动性。

实现原理

1. HTML：

使用 <div> 和 <ul> 元素构建标签云的容器和标签列表，添加控制按钮用于切换标签云的视角。

2. CSS：

  • 使用CSS变量定义样式属性，如颜色、尺寸和动画持续时间。
  • 通过 transform 属性实现标签的三维效果，使用 rotateX 和 translate3d 控制标签的位置和旋转。
  • 使用 @keyframes 定义标签云的旋转动画，使其在用户交互时平滑过渡。

源代码

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style> 
:root {
    --tagcloud-transition-user-duration: 1250ms;
    --tagcloud-transition-user-ease: ease-in-out;
    --tagcloud-transition-duration: 250ms;
    --tagcloud-transition-ease: ease-out;
    --tagcloud-bg-color-rgb: 0, 0, 0;
    --tagcloud-animation-duration: 25s;
    --tagcloud-animation-direction: normal;
    --tagcloud-animation-play-state: running;
    --tagcloud-diameter: 32rem;
    --tagcloud-start-rotation: 54;
    --tagcloud-controls-diameter: 256rem;
    --tagcloud-control-bg-color: transparent;
    --tagcloud-control-bg-hover-color: transparent;
    --tagcloud-control-bg-checked-color: transparent;
    --tag-diameter: 5.5rem;
    --tag-font-color-rgb: 255, 255, 255;
    --tag-font-family: 'Open Sans', sans-serif;
    --tag-font-size: 1rem;
}

/*
global
*/
@import url(//fonts.googleapis.com/css?family=Open+Sans);

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

*:focus {
    outline: none;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: rgb(var(--tagcloud-bg-color-rgb));
    overflow: hidden;
}

/*
tagcloud
*/
.tagcloud-wrapper {
    --_control-diamater: var(--tagcloud-controls-diameter);
    --_control-radius: calc(var(--_control-diamater) / 2);
    --_diameter: var(--tagcloud-diameter);
    --_radius: calc(calc(var(--_diameter) / 2) - calc(var(--tag-diameter) / 2));
    width: var(--control-diameter);
    aspect-ratio: 1 / 1;
    font-family: var(--tag-font-family);
    font-size: var(--tag-font-size);
}

@media only screen and (max-width: 48rem) {
    .tagcloud-wrapper {
        --_control-diamater: calc(var(--tagcloud-controls-diameter) * 0.5);
        --_diameter: calc(var(--tagcloud-diameter) * 0.88);
    }
}
@media only screen and (max-width: 32rem) {
    .tagcloud-wrapper {
        --_diameter: calc(var(--tagcloud-diameter) * 0.75);
    }
}

.tagcloud-wrapper:has(.tagcloud-rotation:hover)  {
    --tagcloud-animation-play-state: paused;
}

.tagcloud-wrapper .tagcloud-tags {
    position: absolute;
    width: var(--_diameter);
    aspect-ratio: 1 / 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    list-style-type: none;
    position: relative;
    transform-style: inherit;
    animation: tagcloud-rotation var(--tagcloud-animation-duration) var(--tagcloud-animation-direction) linear infinite var(--tagcloud-animation-play-state);
}

@keyframes tagcloud-rotation {
    from {transform: translate(-50%, -50%) rotateX(0deg);}
    to {transform: translate(-50%, -50%) rotateX(360deg);}
}

.tagcloud-wrapper .tagcloud-tags:has(.tagcloud-tag div a:hover) .tagcloud-tag:not(:has(div a:hover)) {
    opacity: 0.25;
}

.tagcloud-wrapper .tagcloud-tag {
    --_phi: acos(calc(-1 + (2 * var(--index)) / var(--num-elements)));
    --_theta: calc(sqrt(calc(var(--num-elements) * 3.141592653589793)) * var(--_phi));
    --_x: calc(cos(var(--_theta)) * sin(var(--_phi)));
    --_y: calc(sin(var(--_theta)) * sin(var(--_phi)));
    --_z: calc(cos(var(--_phi)));
    --_vector-length: sqrt(var(--_x) * var(--_x) + var(--_y) * var(--_y) + var(--_z) * var(--_z));
    --_normalized-x: calc(var(--_x) / var(--_vector-length));
    --_normalized-y: calc(var(--_y) / var(--_vector-length));
    --_normalized-z: calc(var(--_z) / var(--_vector-length));
    --_scaled-x: calc(var(--_normalized-x) * var(--_radius));
    --_scaled-y: calc(var(--_normalized-y) * var(--_radius));
    --_scaled-z: calc(var(--_normalized-z) * var(--_radius));
    --_final-x: calc(var(--_scaled-x) + var(--_radius));
    --_final-y: calc(var(--_scaled-y) + var(--_radius));
    --_final-z: var(--_scaled-z);
    pointer-events: none;
    width: var(--tag-diameter);
    height: var(--tag-diameter); 
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    transition: opacity var(--tagcloud-transition-duration) var(--tagcloud-transition-ease);
    transform: translate3d(var(--_final-x), var(--_final-y), var(--_final-z));
    animation: tagcloud-tag-rotation var(--tagcloud-animation-duration) var(--tagcloud-animation-direction) linear infinite var(--tagcloud-animation-play-state);
}

@keyframes tagcloud-tag-rotation {
    from {transform: translate3d(var(--_final-x), var(--_final-y), var(--_final-z)) rotateX(360deg);}
    to {transform: translate3d(var(--_final-x), var(--_final-y), var(--_final-z)) rotateX(0deg);}
}

.tagcloud-wrapper .tagcloud-tag div {
    transform: rotateZ(calc(var(--_current-rotation) * -1deg));
    transition: transform var(--tagcloud-transition-user-duration) var(--tagcloud-transition-user-ease);
}

.tagcloud-wrapper .tagcloud-tag div a {
    pointer-events: initial;
    color: rgb(var(--tag-font-color-rgb));
    text-decoration: none;
    text-shadow: 1px  1px 1px rgb(var(--tagcloud-bg-color-rgb)),
                    1px -1px 1px rgb(var(--tagcloud-bg-color-rgb)),
                    -1px  1px 1px rgb(var(--tagcloud-bg-color-rgb)),
                    -1px -1px 1px rgb(var(--tagcloud-bg-color-rgb)), 
                    0 0 1rem rgb(var(--tagcloud-bg-color-rgb));
}

.tagcloud-wrapper .tagcloud-controls {
    width: var(--_control-diamater);
    aspect-ratio: 1 / 1;
    position: relative;
    --_current-rotation: var(--tagcloud-start-rotation);
    transform-style: inherit;
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button {
    --_width: var(--_control-radius);
    --_height: calc(var(--_control-diamater) * 3.141592653589793 / var(--num-elements) + 1px);
    --_theta-start: 0;
    --_theta-length: calc(2 * 3.141592653589793);
    --_segment: calc(var(--_theta-start) + var(--index) / var(--num-elements) * var(--_theta-length));
    --_x: calc(var(--_control-radius) * cos(var(--_segment)));
    --_y: calc(var(--_control-radius) * sin(var(--_segment)) + var(--_control-radius) - var(--_height) / 2);
    --_rotation: calc(var(--index) / var(--num-elements) * 360deg);
    position: absolute;
    left: var(--_x);
    top: var(--_y);
    width: var(--_width);
    height: var(--_height);
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
    transform-origin: right center;
    transform: rotate(var(--_rotation));
    transition: background-color var(--tagcloud-transition-duration) var(--tagcloud-transition-ease);
    background-color: var(--tagcloud-control-bg-color);
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button input {
    -webkit-appearance: none;
    appearance: none;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:checked) {
    background-color: var(--tagcloud-control-bg-checked-color);
}
.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:hover) {
    background-color: var(--tagcloud-control-bg-hover-color);
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(1) input:checked) {
    --_current-rotation: 108;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(2) input:checked) {
    --_current-rotation: 126;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(3) input:checked) {
    --_current-rotation: 144;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(4) input:checked) {
    --_current-rotation: 162;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(5) input:checked) {
    --_current-rotation: 180;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(6) input:checked) {
    --_current-rotation: 198;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(7) input:checked) {
    --_current-rotation: 216;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(8) input:checked) {
    --_current-rotation: 234;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(9) input:checked) {
    --_current-rotation: 252;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(10) input:checked) {
    --_current-rotation: 270;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(11) input:checked) {
    --_current-rotation: 288;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(12) input:checked) {
    --_current-rotation: 306;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(13) input:checked) {
    --_current-rotation: 324;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(14) input:checked) {
    --_current-rotation: 342;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(15) input:checked) {
    --_current-rotation: 0;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(16) input:checked) {
    --_current-rotation: 18;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(17) input:checked) {
    --_current-rotation: 36;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(18) input:checked) {
    --_current-rotation: 54;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(19) input:checked) {
    --_current-rotation: 72;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(20) input:checked) {
    --_current-rotation: 90;
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:checked) ~ .tagcloud-rotation {
    transform: translate(-50%, -50%) rotate(calc(var(--_current-rotation) * 1deg));
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:checked) ~ .tagcloud-rotation .tagcloud-tags .tagcloud-tag div {
    transform: rotateZ(calc(var(--_current-rotation) * -1deg));
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-rotation {
    position: absolute;
    width: var(--_diameter);
    aspect-ratio: 1 / 1;
    perspective: calc(var(--_diameter) * 2);
    transform-style: preserve-3d;
    left: 50%;
    top: 50%;
    background: radial-gradient(rgba(var(--tagcloud-bg-color-rgb), 0.75) 15% , rgba(var(--tagcloud-bg-color-rgb), 0) calc(75% - var(--tag-diameter)));
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(calc(var(--_current-rotation) * 1deg));
    transition: transform var(--tagcloud-transition-user-duration) var(--tagcloud-transition-user-ease);
}
   </style>
</head>

<body>
  <div class="tagcloud-wrapper">

  <div class="tagcloud-controls" style="--num-elements: 20">

    <div class="tagcloud-control-button" style="--index: 1"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 2"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 3"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 4"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 5"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 6"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 7"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 8"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 9"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 10"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 11"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 12"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 13"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 14"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 15"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 16"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 17"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 18"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 19"><input type="radio" name="tagcloud-control-input"></div>
    <div class="tagcloud-control-button" style="--index: 20"><input type="radio" name="tagcloud-control-input"></div>

    <div class="tagcloud-rotation">
      <ul class="tagcloud-tags" style="--num-elements: 93">

        <li class="tagcloud-tag" style="--index: 1"><div><a href="https://vuejs.org/" target="_blank">Vue.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 2"><div><a href="https://nuxt.com/" target="_blank">Nuxt.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 3"><div><a href="https://github.com/CesiumGS/cesium" target="_blank">Cesium</a></div></li>
        <li class="tagcloud-tag" style="--index: 4"><div><a href="https://zzz.dog/" target="_blank">Zdog</a></div></li>
        <li class="tagcloud-tag" style="--index: 5"><div><a href="https://www.vantajs.com/" target="_blank">Vanta.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 6"><div><a href="https://github.com/micku7zu/vanilla-tilt.js" target="_blank">Tilt.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 7"><div><a href="https://threejs.org/" target="_blank">Three.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 8"><div><a href="https://angularjs.org/" target="_blank">Angular</a></div></li>
        <li class="tagcloud-tag" style="--index: 9"><div><a href="https://reactjs.org/" target="_blank">React</a></div></li>
        <li class="tagcloud-tag" style="--index: 10"><div><a href="https://svelte.dev/" target="_blank">Svelte</a></div></li>
        <li class="tagcloud-tag" style="--index: 11"><div><a href="https://nextjs.org/" target="_blank">Next.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 12"><div><a href="https://www.gatsbyjs.com/" target="_blank">Gatsby</a></div></li>
        <li class="tagcloud-tag" style="--index: 13"><div><a href="https://expressjs.com/" target="_blank">Express.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 14"><div><a href="https://www.sencha.com/products/extjs/" target="_blank">ExtJS</a></div></li>
        <li class="tagcloud-tag" style="--index: 15"><div><a href="https://mithril.js.org/" target="_blank">Mithril</a></div></li>
        <li class="tagcloud-tag" style="--index: 16"><div><a href="https://backbonejs.org/" target="_blank">Backbone.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 17"><div><a href="https://jquery.com/" target="_blank">jQuery</a></div></li>
        <li class="tagcloud-tag" style="--index: 18"><div><a href="https://playcanvas.com/" target="_blank">PlayCanvas</a></div></li>
        <li class="tagcloud-tag" style="--index: 19"><div><a href="https://polymer-library.polymer-project.org/" target="_blank">Polymer</a></div></li>
        <li class="tagcloud-tag" style="--index: 20"><div><a href="http://aurelia.io/" target="_blank">Aurelia</a></div></li>
        <li class="tagcloud-tag" style="--index: 21"><div><a href="https://emberjs.com/" target="_blank">Ember.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 22"><div><a href="https://alpinejs.dev/" target="_blank">Alpine.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 23"><div><a href="https://nodejs.org/en/" target="_blank">Node.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 24"><div><a href="https://d3js.org/" target="_blank">D3.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 25"><div><a href="https://underscorejs.org/" target="_blank">Underscore.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 26"><div><a href="https://lodash.com/" target="_blank">Lodash</a></div></li>
        <li class="tagcloud-tag" style="--index: 27"><div><a href="https://pixijs.com/" target="_blank">PixiJS</a></div></li>
        <li class="tagcloud-tag" style="--index: 28"><div><a href="https://animejs.com/" target="_blank">Anime.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 29"><div><a href="https://rishabhp.github.io/bideo.js/" target="_blank">Bideo.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 30"><div><a href="https://www.chartjs.org/" target="_blank">Chart.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 31"><div><a href="https://nosir.github.io/cleave.js/" target="_blank">Cleave.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 32"><div><a href="https://glimmerjs.com/" target="_blank">Glimmer</a></div></li>
        <li class="tagcloud-tag" style="--index: 33"><div><a href="https://sarcadass.github.io/granim.js/" target="_blank">Granim.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 34"><div><a href="https://github.com/alvarotrigo/fullPage.js/" target="_blank">fullPage.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 35"><div><a href="https://leafletjs.com/" target="_blank">Leaflet</a></div></li>
        <li class="tagcloud-tag" style="--index: 36"><div><a href="https://multiple.js.org/" target="_blank">Multiple.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 37"><div><a href="https://momentjs.com/" target="_blank">Moment.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 38"><div><a href="https://masonry.desandro.com/" target="_blank">Masonry</a></div></li>
        <li class="tagcloud-tag" style="--index: 39"><div><a href="http://omniscientjs.github.io/" target="_blank">Omniscient</a></div></li>
        <li class="tagcloud-tag" style="--index: 40"><div><a href="http://parsleyjs.org/" target="_blank">Parsley</a></div></li>
        <li class="tagcloud-tag" style="--index: 41"><div><a href="https://popper.js.org/" target="_blank">Popper.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 42"><div><a href="https://github.com/sindresorhus/screenfull.js/" target="_blank">Screenfull.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 43"><div><a href="https://vocajs.com/" target="_blank">Voca</a></div></li>
        <li class="tagcloud-tag" style="--index: 44"><div><a href="https://getbootstrap.com/" target="_blank">Bootstrap</a></div></li>
        <li class="tagcloud-tag" style="--index: 45"><div><a href="https://mochajs.org/" target="_blank">Mocha</a></div></li>
        <li class="tagcloud-tag" style="--index: 46"><div><a href="https://ionicframework.com/" target="_blank">Ionic</a></div></li>
        <li class="tagcloud-tag" style="--index: 47"><div><a href="https://webix.com/" target="_blank">Webix</a></div></li>
        <li class="tagcloud-tag" style="--index: 48"><div><a href="https://www.meteor.com/" target="_blank">Meteor.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 49"><div><a href="https://p5js.org/" target="_blank">p5</a></div></li>
        <li class="tagcloud-tag" style="--index: 50"><div><a href="https://www.babylonjs.com/" target="_blank">Babylon.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 51"><div><a href="https://github.com/aframevr/aframe" target="_blank">Aframe</a></div></li>
        <li class="tagcloud-tag" style="--index: 52"><div><a href="https://zeptojs.com/" target="_blank">Zepto</a></div></li>
        <li class="tagcloud-tag" style="--index: 53"><div><a href="https://createjs.com/" target="_blank">CreateJS</a></div></li>
        <li class="tagcloud-tag" style="--index: 54"><div><a href="https://nightwatchjs.org/" target="_blank">Nightwatch.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 55"><div><a href="https://stimulus.hotwired.dev/" target="_blank">Stimulus</a></div></li>
        <li class="tagcloud-tag" style="--index: 56"><div><a href="https://nativescript.org/" target="_blank">NativeScript</a></div></li>
        <li class="tagcloud-tag" style="--index: 57"><div><a href="https://relay.dev/" target="_blank">Relay</a></div></li>
        <li class="tagcloud-tag" style="--index: 58"><div><a href="https://cycle.js.org/" target="_blank">Cycle.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 59"><div><a href="https://flightjs.github.io/" target="_blank">Flight</a></div></li>
        <li class="tagcloud-tag" style="--index: 60"><div><a href="http://trykickoff.com/" target="_blank">Kickoff</a></div></li>
        <li class="tagcloud-tag" style="--index: 61"><div><a href="https://cylonjs.com/" target="_blank">Cylon.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 62"><div><a href="https://jestjs.io/" target="_blank">Jest</a></div></li>
        <li class="tagcloud-tag" style="--index: 63"><div><a href="https://feathersjs.com/" target="_blank">Feathers</a></div></li>
        <li class="tagcloud-tag" style="--index: 64"><div><a href="http://bootboxjs.com/" target="_blank">Bootbox.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 65"><div><a href="https://modernizr.com/" target="_blank">Modernizr</a></div></li>
        <li class="tagcloud-tag" style="--index: 66"><div><a href="https://cube.dev/" target="_blank">Cube.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 67"><div><a href="https://requirejs.org/" target="_blank">RequireJS</a></div></li>
        <li class="tagcloud-tag" style="--index: 68"><div><a href="https://jasmine.github.io/" target="_blank">Jasmine</a></div></li>
        <li class="tagcloud-tag" style="--index: 69"><div><a href="https://qunitjs.com/" target="_blank">QUnit</a></div></li>
        <li class="tagcloud-tag" style="--index: 70"><div><a href="https://github.com/soulwire/sketch.js" target="_blank">sketch.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 71"><div><a href="https://github.com/wso2/jaggery" target="_blank">Jaggery</a></div></li>
        <li class="tagcloud-tag" style="--index: 72"><div><a href="https://kangoextensions.com/" target="_blank">Kango</a></div></li>
        <li class="tagcloud-tag" style="--index: 73"><div><a href="https://www.cappuccino.dev/" target="_blank">Cappuccino</a></div></li>
        <li class="tagcloud-tag" style="--index: 74"><div><a href="https://konvajs.org/" target="_blank">Konva</a></div></li>
        <li class="tagcloud-tag" style="--index: 75"><div><a href="https://sproutcore.com/" target="_blank">SproutCore</a></div></li>
        <li class="tagcloud-tag" style="--index: 76"><div><a href="https://webix.com/" target="_blank">Webix</a></div></li>
        <li class="tagcloud-tag" style="--index: 77"><div><a href="https://github.com/quirkey/sammy" target="_blank">Sammy</a></div></li>
        <li class="tagcloud-tag" style="--index: 78"><div><a href="https://seemple.js.org/#!home" target="_blank">Seemple.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 79"><div><a href="https://socket.io/" target="_blank">Socket.IO</a></div></li>
        <li class="tagcloud-tag" style="--index: 80"><div><a href="https://xstyled.dev/" target="_blank">xstyled</a></div></li>
        <li class="tagcloud-tag" style="--index: 81"><div><a href="http://vanilla-js.com/" target="_blank">VanillaJS</a></div></li>
        <li class="tagcloud-tag" style="--index: 82"><div><a href="https://github.com/linnovate/mean" target="_blank">MEAN</a></div></li>
        <li class="tagcloud-tag" style="--index: 83"><div><a href="https://github.com/flatiron/flatiron" target="_blank">Flatiron</a></div></li>
        <li class="tagcloud-tag" style="--index: 84"><div><a href="https://ripplejs.github.io/" target="_blank">ripple.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 85"><div><a href="https://sailsjs.com/" target="_blank">Sails.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 86"><div><a href="https://mochi.github.io/mochikit/" target="_blank">MochiKit</a></div></li>
        <li class="tagcloud-tag" style="--index: 87"><div><a href="https://optimizely.github.io/nuclear-js/" target="_blank">NuclearJS</a></div></li>
        <li class="tagcloud-tag" style="--index: 88"><div><a href="https://ampersandjs.com/" target="_blank">Ampersand.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 89"><div><a href="https://heisenbergjs.github.io/heisenberg/" target="_blank">Heisenberg.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 90"><div><a href="https://marionettejs.com/" target="_blank">Marionette</a></div></li>
        <li class="tagcloud-tag" style="--index: 91"><div><a href="https://pagerjs.com/" target="_blank">pager.js</a></div></li>
        <li class="tagcloud-tag" style="--index: 92"><div><a href="https://canjs.com/" target="_blank">CanJS</a></div></li>
        <li class="tagcloud-tag" style="--index: 93"><div><a href="http://rivetsjs.com/" target="_blank">Rivets.js</a></div></li>

      </ul>
    </div>

  </div>

</div>
</body>

</html>

images

复制全文 生成海报 前端开发 动画效果 用户体验

推荐文章

在 Go 语言中使用 Wire 进行依赖注入
2024-11-19 08:47:21 +0800 CST
Vue3如何执行响应式数据绑定？
2024-11-18 12:31:22 +0800 CST
Vue 中如何处理父子组件通信？
2024-11-17 04:35:13 +0800 CST
Rust async/await 异步运行时
2024-11-18 19:04:17 +0800 CST
Skip是一款为Swift开发者设计的跨平台工具，允许开发者使用一套Swift代码生成iOS和Android的原生应用
2024-11-19 05:18:20 +0800 CST
`context`包是Go语言中的标准库，用于在并发环境中安全地传递上下文信息
2024-11-19 04:28:00 +0800 CST
在 Rust 生产项目中存储数据
2024-11-19 02:35:11 +0800 CST
Rust vs JavaScript: 使用 WebAssembly 提升 66% 的性能
2024-11-19 04:18:48 +0800 CST
JavaScript 异步编程入门
2024-11-19 07:07:43 +0800 CST
如何在Vue3中实现动态主题切换功能
2024-11-19 10:10:20 +0800 CST
一个安全支付表单的HTML结构和样式
2025-03-18 17:39:01 +0800 CST
实现Linux SSH登录提醒并发送消息到企业微信群
2024-11-18 01:03:17 +0800 CST
Vue3中的Store模式有哪些改进？
2024-11-18 11:47:53 +0800 CST
如何在Vue3中实现网页时钟，显示当前时间并每秒更新一次
2024-11-18 20:57:06 +0800 CST
Vue3中的Composition API是什么？它与Options API有什么区别？
2024-11-19 03:24:22 +0800 CST
Vue中的异步更新是如何实现的？
2024-11-18 19:24:29 +0800 CST
Go应用中使用MongoDB客户端库mongo-driver
2024-11-18 21:53:37 +0800 CST
深入了解 JavaScript 中 forEach 的使用技巧与陷阱
2024-11-18 12:56:18 +0800 CST
MySQL死锁 - 更新插入导致死锁
2024-11-19 05:53:50 +0800 CST
python-dotenv，一个Python中非常有用的库
2024-11-17 11:27:28 +0800 CST
AJ-Captcha —— 一款跨平台、高效、安全的验证码功能
2024-11-19 08:19:51 +0800 CST
10个热门的Node.js开源项目，包括Express、Koa、Socket.IO等
2024-11-18 08:32:19 +0800 CST
25个实用的JavaScript单行代码片段
2024-11-18 04:59:49 +0800 CST
基于 Rust Pingora 构建高性能的负载均衡器
2024-11-18 08:49:35 +0800 CST
如何使用Tonic构建高性能的gRPC应用
2024-11-18 16:10:20 +0800 CST
Vue3 中的 `emits` 选项是用来做什么的？
2024-11-17 16:00:20 +0800 CST
如何在Vue3中使用自定义指令创建一个拖拽组件？
2024-11-19 07:18:22 +0800 CST
如何通过封装自定义Hook来实现对localStorage的响应式监听，解决了在更改时区时相关组件无法实时更新的问题
2024-11-19 03:08:13 +0800 CST
如何利用JavaScript开发一个兼容PC和移动端的富文本编辑器
2024-11-19 04:21:14 +0800 CST
LangChainGo 一个 LangChain 的 Go 语言扩展
2025-03-09 22:27:54 +0800 CST
用 PHP 简单实现地址自动识别功能
2024-11-19 05:15:45 +0800 CST
资源文档库
2024-12-07 20:42:49 +0800 CST
如何在Vue 3中展示如何根据数据状态动态更新样式和类
2024-11-18 21:46:46 +0800 CST
JavaScript 原生实现图片复制与粘贴
2024-11-18 17:39:20 +0800 CST
程序员出海搞钱工具库
2024-11-18 22:16:19 +0800 CST
在MySQL中全局回滚一张表数据的多种方法，包括使用事务、备份与恢复、触发器和二进制日志
2024-11-18 13:59:43 +0800 CST
推荐几个前端常用的工具网站
2024-11-19 07:58:08 +0800 CST
纯 CSS 实现一个笔记本电脑的组装动画
2024-11-17 04:44:14 +0800 CST
Vue3中的Slots有哪些变化？
2024-11-18 16:34:49 +0800 CST
Vue 中的 mixins 和 extends 两种方式有什么区别？
2024-11-18 23:38:32 +0800 CST
MySQL 主从同步一致性详解
2024-11-19 02:49:19 +0800 CST
Dcat Admin：高效简洁的Laravel后台管理系统构建神器
2024-11-18 09:09:39 +0800 CST
安全赋值运算符：新的 JavaScript 提案让你告别 try-catch！
2024-11-19 07:48:48 +0800 CST
PyInstaller是一个用于将Python应用程序及其依赖项打包成独立可执行文件的工具，简化了分发和部署过程
2024-11-17 05:09:10 +0800 CST
智能视频墙
2025-02-22 11:21:29 +0800 CST
使用 `<script setup>` 语法糖时的常见错误、原因及避免方法
2024-11-18 02:34:48 +0800 CST
vue打包后如何进行调试错误
2024-11-17 18:20:37 +0800 CST
prosafe-exporter是一个Python库，专用于将数据导出为CSV、Excel、JSON等格式
2024-11-19 03:12:50 +0800 CST
thinkphp swoole websocket 结合的demo
2024-11-18 10:18:17 +0800 CST
Python中的`real-estate`库，旨在帮助房地产行业的数据分析人员获取和处理房地产数据
2024-11-18 19:33:13 +0800 CST
程序员茄子在线接单