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-balance .765s ease-in-out infinite alternate;
	animation:scissors-balance .765s ease-in-out infinite alternate
}
.scissors .rotate {
	transform:rotate(20deg);
	-webkit-animation:cut .3825s ease-out infinite alternate;
	animation:cut .3825s ease-out infinite alternate;
	height:180px
}
.scissors__l {
	z-index:0;
	position:absolute;
	top:0
}
.scissors__r {
	transform:rotateY(180deg);
	position:absolute;
	top:0;
	left:0;
	z-index:5
}
.scissors .spike {
	background:#fff;
	height:6px;
	width:6px;
	z-index:10;
	border-radius:5px;
	position:absolute;
	top:85px;
	left:2px
}
.scissors .razor {
	background:#fff;
	height:90px;
	width:10px;
	border-radius:0 20px 0 0
}
.scissors .cable {
	position:relative
}
.scissors .cable__base {
	position:absolute;
	top:-20px;
	left:-3px;
	background:#6a3060;
	height:60px;
	width:15px;
	border-radius:40px 0 0 40px
}
.scissors .cable__finger {
	position:absolute;
	right:-2px;
	top:20px;
	height:50px;
	width:50px;
	border-radius:100%;
	border:8px solid #6a3060
}
.paper-rotate {
	-webkit-animation:paper-rotate 1.53s cubic-bezier(0,1.38,0,0.96) infinite;
	animation:paper-rotate 1.53s cubic-bezier(0,1.38,0,0.96) infinite
}
.paper-rotate::before {
	content:&q.........完整代码请登录后点击上方下载按钮下载查看