css+div实现三维文字标签云旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css+div实现三维文字标签云旋转动画效果代码，鼠标悬浮暂停提出显示，点击可跳转。

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

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

<head>
  <meta charset="UTF-8">
 
  
  
<style>
/*
vars
*/
: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(--_c.........完整代码请登录后点击上方下载按钮下载查看