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

代码语言:html

所属分类:动画

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

代码标签: 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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0