原生js+css实现鼠标悬停瓷砖拼筹旋转动画效果代码
代码语言:html
所属分类:悬停
代码描述:原生js+css实现鼠标悬停瓷砖拼筹旋转动画效果代码,鼠标悬浮上去就会转动。
代码标签: 原生 js css 鼠标 悬停 瓷砖 拼筹 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *{ box-sizing: border-box; } html, body { height: 100%; overflow: hidden;} body { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0; --bg: #ccc; --clr: #333; background: var(--bg); transform-style: preserve-3d; perspective: 1000px; background: #333; } body::after { content: ''; display: block; position: absolute; width: 100%; height: 100%; background: linear-gradient(0deg, #0000 42%, #0003 100%); pointer-events: none; } .cirContainer { transform: translateY(-12%) rotateX(28deg); --tc: 4px; } .cirRow { display: flex; height: fit-content; } .cir { position: relative; width: var(--size); height: var(--size); overflow: hidden; transition: all 0.6s ease-in-out; box-shadow: inset 0 0 0 0.5px #aaa; background: var(--bg); } .cir::before, .cir::after { content: ''; display: block; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; height: 100%; width: 100%; } .cir::before { background: radial-gradient( circle at 0.1% 0.1%, transparent 0px, transparent calc((var(--size) / 2) - var(--tc)), var(--clr) calc((var(--size) / 2) - var(--tc)), var(--clr) calc((var(--size) / 2) + var(--tc)), transparent calc((var(--size) / 2) + var(--tc)) ); } .cir::after { background: radial-gradient( circle at 99.9% 99.9%, transparent 0px, transparent calc((var(--size) / 2) - var(--tc)), var(--clr) calc((var(--size) / 2) - var(--tc)), var(--clr) calc((var(--size) / 2) + var(--tc)), transparent calc((var(--size) / 2) + var(--tc)) ); } </style> </head> <body translate="no"> <script > const elementScale = 64; let elementsPerRow, rows; let intervals = []; function updateDimensions() { elementsPerRow = Math.floor(window.innerWidth / (elementScale * 0.5)) + 1; rows = Math.floor(window.innerHeight / (elementScale * 0.8)) + 1; } function getRanInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function rotateElement(element, random = true) { const direction = random ? Math.random() < 0.5 ? 1 : -1 : 1; const currentRotation = parseInt(element.getAttribute('data-rotation') || '0'); const newRotation = currentRotation + 90 * direction; element.style.transform = `rotate(${newRotation}deg)`; element.setAttribute('data-rotation', newRotation); } function startIntervals() { document.querySelectorAll('.c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0