css+div实现三维文字标签云旋转动画效果代码
代码语言: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(--_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> <script> window.console = window.console || function(t) {}; </script> </head> <body translate="no"> <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="_.........完整代码请登录后点击上方下载按钮下载查看
网友评论0