div+css实现宝剑砍照片一分为二动画效果代码-html代码-BFW代码库

div+css实现宝剑砍照片一分为二动画效果代码

代码语言：html

所属分类：动画

代码描述：div+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:flex;
	flex-direction:column;
	align-items:center;
	transform:rotate(-5deg);
	z-index:2;
	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: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 .5vmin .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;
	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);
	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-image:url(//repo.bfw.wiki/bfwrepo/image/62eb2737168b1.png);
	background-size:cover;
	width:100%;
	height:100%;
	transform:translateX(100vw);
	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,fade-out var(--dur) var(--ease) infinite;
	animation:square-left var(--dur) var(--ease) infinite,fade-out var(--dur) var(--ease) infinite
}
.square:after {
	-webkit-clip-path:pol.........完整代码请登录后点击上方下载按钮下载查看