css实现刀切方块裂开动画效果
代码语言:html
所属分类:动画
代码描述:通过css布局模拟刀切方块裂开的效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --size: 45vmin; --dur: 4.2s; --ease: cubic-bezier(0.165, 0.84, 0.44, 1); } * { box-sizing: border-box; } html, body { height: 100%; } body { display: grid; place-items: center; overflow: hidden; -webkit-animation: bg-color var(--dur) var(--ease) infinite; animation: bg-color var(--dur) var(--ease) infinite; } .sword { position: absolute; bottom: 25%; left: 0; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; -webkit-transform: rotate(-5deg); transform: rotate(-5deg); z-index: 2; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-animation: chop var(--dur) var(--ease) infinite; animation: chop var(--dur) var(--ease) infinite; } .blade { --color-1: #e7e7e7; --color-2: #f3f3f3; width: calc(var(--size) / 5); height: calc(var(--size) / 1.25); position: relative; background-image: -webkit-gradient(linear, left top, right top, from(var(--color-1)), color-stop(50%, var(--color-1)), color-stop(50%, var(--color-2)), to(var(--color-2))); background-image: linear-gradient(to right, var(--color-1), var(--color-1) 50%, var(--color-2) 50%, var(--color-2) 100%); box-shadow: inset -1vmin 0 4vmin rgba(0, 0, 0, 0.075); -webkit-clip-path: polygon(50% 0%, 100% 15%, 100% 100%, 0 100%, 0% 15%); clip-path: polygon(50% 0%, 100% 15%, 100% 100%, 0 100%, 0% 15%); -webkit-animation: blade-glow var(--dur) var(--ease) infinite; animation: blade-glow var(--dur) var(--ease) infinite; } .handle { position: relative; width: calc(var(--size) / 8); height: calc(var(--size) / 3); background-color: #363636; border-radius: 0 0 0.5vmin 0.5vmin; box-shadow: inset 0 5vmin 2vmin rgba(0, 0, 0, 0.35), inset 2.5vmin 0 3vmin rgba(0, 0, 0, 0.35); } .handle:after { content: ''; position: absolute; top: 0; left: 50%; width: calc(var(--size) / 2.75); height: calc(var(--size) / 20); background-color: inherit; -webkit-transform: translateX(-50%); transform: translateX(-50%); box-shadow: inset 1vmin -1vmin 2.5vmin rgba(0, 0, 0, 0.35); -webkit-clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); } .square { position: relative; width: var(--size); height: var(--size); -webkit-perspective: 100vw; perspective: 100vw; -webkit-animation: shake var(--dur) linear infinite; animation: shake var(--dur) linear infinite; } .square:before, .square:after { content: ''; position: absolute; top: 0; background-color: dodgerblue; width: 100%; height: 100%; -webkit-transform: translateX(100vw); transform: translateX(100vw); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .square:before { -webkit-clip-path: polygon(26% 0, 76% 100%, 0 100%, 0 0); clip-path: polygon(26% 0, 76% 100%, 0 100%, 0 0); z-index: 1; -webkit-animation: square-left var(--dur) var(--ease) infinite, square-color var(--dur) var(--ease) infinite, fade-out var(--dur) var(--ease) infinite; animation: square-left var(--dur) var(--ease) infinite, square-color var(--dur) var(--ease) infinite, fade-out var(--dur) var(--ease) infinite; } .square:after { -webkit-clip-path: polygon(100% 0, 100% 100%, 75% 100%, 25% 0); clip-path: polygon(100% 0, 100% 100%, 75% 100%, 25% 0); z-index: 3; -webkit-animation: square-right var(--dur) var(--ease) infinite, square-color var(--dur) var(--ease) infinite, fade-out var(--dur) var(--ease) infinite; animation: square-right var(--dur) var(--ease) infinite, square-color var(--dur) var(--ease) infinite, fade-out var(--dur) var(--ease) infinite; } @-webkit-keyframes square-left { 26% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translate(-5%, -5%) rotate(-1deg); transform: t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0