css实现多层grid网格倾斜位移交互动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现多层grid网格倾斜位移交互动画效果代码
代码标签: css 多层 grid 网格 倾斜 位移 交互 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @property --x { syntax: "<number>"; inherits: true; initial-value: 1; } @property --y { syntax: "<number>"; inherits: true; initial-value: 1; } .block { --offset: 0.125em; transition: all 0.1s linear; transition-property: --x, --y; position: relative; opacity: 0.7; transform-style: preserve-3d; --rotate: rotateX(calc(var(--x) * -30deg)) rotateY(calc(var(--y) * 30deg)); transform: var(--rotate); } .block > .block { position: absolute; top: calc(var(--grid-line-size) * -1); left: calc(var(--grid-line-size) * -1); z-index: -1; transform: translate3d(calc(var(--x) * var(--offset) * -1), calc(var(--y) * var(--offset) * -1), -10px); } body { perspective: 600px; transform-style: preserve-3d; } body > .block { -webkit-animation: wiggle 4s linear infinite; animation: wiggle 4s linear infinite; } @-webkit-keyframes wiggle { 0% { --x: 1; --y: 1; } 25% { --x: -1; --y: 1; } 50% { --x: -1; --y: -1; } 75% { --x: 1; --y: -1; } 100% { --x: 1; --y: 1; } } @keyframes wiggle { 0% { --x: 1; --y: 1; } 25% { --x: -1; --y: 1; } 50% { --x: -1; --y: -1; } 75% { --x: 1; --y: -1; } 100% { --x: 1; --y: 1; } } html:hover .block { -webkit-animation: none; animation: none; } .block {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0