css实现立方体堆叠悬浮变色动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现立方体堆叠悬浮变色动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #25335b; } @keyframes animate { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } .container { position: relative; top: -80px; transform: skewY(-20deg); animation: animate 5s linear infinite; } .container .cube { position: relative; z-index: 2; } .container .cube:nth-child(2) { z-index: 1; translate: -60px -60px; } .container .cube:nth-child(3) { z-index: 3; translate: 60px 60px; } .container .cube div { position: absolute; display: flex; flex-direction: column; gap: 30px; translate: calc(-70px * var(--x)) calc(-60px * var(--y)); } .container .cube div span { position: relative; display: inline-block; width: 50px; height: 50px; background: #dcdcdc; z-index: calc(1 * var(--i)); transition: 1.5s; } .container .cube div span:hover { transition: 0s; background: #ef4149; filter: drop-shadow(0 0 30px #ef4149); } .container .cube div span:hover:before, .container .cube div span:hover:after { transition: 0s; background: #ef4149; } .container .cube div span:before { content: ""; position: absolute; left: -40px; width: 40px; height: 100%; background: #fff; transform-origin: right; transform: skewY(45deg); transition: 1.5s; } .container .cube div span:after { content: ""; position: absolute; top: -40px; left: 0px; width: 100%; height: 40px; background: #f2f2f2; transform-origin: bottom; transform: skewX(45deg); transition: 1.5s; } </style> </head> <body translate="no" > <div class="container"> <div class="cube"> <div style="--x:-1; --y:0;"> <span style="--i:3;">.........完整代码请登录后点击上方下载按钮下载查看
网友评论0