css+div实现剪刀剪纸动画效果代码-html代码-BFW代码库

css+div实现剪刀剪纸动画效果代码

代码语言：html

所属分类：动画

代码描述：css+div实现剪刀剪纸动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
* {
	box-sizing:border-box;
	margin:0;
	padding:0
}
body {
	overflow:hidden;
	background:#ff6443;
	display:flex;
	justify-content:center;
	align-items:center;
	height:100vh;
	width:100vw
}
.area {
	position:relative;
	width:625px;
	height:220px
}
.scissors-position {
	-webkit-animation:scissors-position 1.53s ease-in infinite;
	animation:scissors-position 1.53s ease-in infinite
}
.shadow {
	height:20px;
	width:200px;
	position:absolute;
	left:30%;
	border-radius:100%;
	background:radial-gradient(rgba(0,0,0,0.08) 5%,transparent)
}
.scissors-shadow-position {
	-webkit-animation:scissors-shadow-position 1.53s ease-in-out infinite;
	animation:scissors-shadow-position 1.53s ease-in-out infinite;
	height:40px;
	width:40%;
	position:absolute;
	bottom:-60px;
	left:-90px
}
.p1-shadow-position {
	-webkit-animation:p1-shadow-position .765s ease-in-out infinite alternate;
	animation:p1-shadow-position .765s ease-in-out infinite alternate;
	height:40px;
	width:40%;
	position:absolute;
	bottom:-60px;
	left:80px
}
.p1-shadow-position .p1-shadow {
	-webkit-animation:p1-shadow .765s ease-in-out infinite alternate;
	animation:p1-shadow .765s ease-in-out infinite alternate
}
.p2-shadow-position {
	-webkit-animation:p2-shadow-position .765s ease-in-out infinite alternate;
	animation:p2-shadow-position .765s ease-in-out infinite alternate;
	height:40px;
	width:40%;
	position:absolute;
	bottom:-70px;
	left:200px
}
.p2-shadow-position .p2-shadow {
	-webkit-animation:p2-shadow .765s ease-in-out infinite;
	animation:p2-shadow .765s ease-in-out infinite;
	height:15px;
	width:90px
}
.scissors {
	position:absolute;
	left:0;
	-webkit-animation:scissors-balan.........完整代码请登录后点击上方下载按钮下载查看