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

代码语言：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:"";
	background:#ffd994;
	border-radius:100%;
	position:absolute;
	top:0;
	right:0;
	width:0;
	height:0;
	-webkit-animation:trail-dots-before .765s ease-out infinite;
	animation:trail-dots-before .765s ease-out infinite
}
.paper-rotate::after {
	content:"";
	background:#77355d;
	border-radius:100%;
	position:absolute;
	top:0;
	right:0;
	width:0;
	height:0;
	-webkit-animation:trail-dots-after .765s ease-out infinite;
	animation:trail-dots-after .765s ease-out infinite
}
.paper-balance {
	-webkit-animation:paper-balance .765s ease infinite;
	animation:paper-balance .765s ease infinite;
	height:10px
}
.paper {
	margin:0;
	display:flex;
	justify-content:center;
	height:150px;
	width:400px;
	position:relative;
	right:80px;
	-webkit-animation:paper-move .765s ease-in-out infinite alternate;
	animation:paper-move .765s ease-in-out infinite alternate
}
.paper__p1 {
	position:absolute;
	align-self:center;
	width:100px;
	height:100px;
	background:#fff;
	-webkit-clip-path:polygon(0 0,0 45%,90% 45%);
	clip-path:polygon(0 0,0 45%,90% 45%);
	-webkit-animation:triangle-p1 .765s ease-in-out infinite;
	animation:triangle-p1 .765s ease-in-out infinite
}
.paper__p2 {
	align-self:center;
	width:100px;
	height:100px;
	background:#fff;
	-webkit-clip-path:polygon(0 45%,0 100%,90% 45%);
	clip-path:polygon(0 45%,0 100%,90% 45%);
	-webkit-animation:triangle-p2 .765s ease-in-out infinite;
	animation:triangle-p2 .765s ease-in-out infinite
}
.trail-rotate {
	-webkit-animation:trail-rotate 1.53s ease-in-out infinite;
	animation:trail-rotate 1.53s ease-in-out infinite
}
.trail-trace {
	height:3px;
	width:250px;
	position:absolute;
	top:100px;
	transform:rotate(27deg);
	left:160px;
	-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);
	clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);
	background:#fff;
	-webkit-animation:trail-trace .765s ease-in-out infinite;
	animation:trail-trace .765s ease-in-out infinite
}
@-webkit-keyframes trail-dots-before {
	0% {
	transform:translate(0px,0px);
	width:15px;
	height:15px
}
100% {
	transform:translate(100px,0px);
	width:0;
	height:0
}
}@keyframes trail-dots-before {
	0% {
	transform:translate(0px,0px);
	width:15px;
	height:15px
}
100% {
	transform:translate(100px,0px);
	width:0;
	height:0
}
}@-webkit-keyframes trail-dots-after {
	0% {
	transform:translate(0px,0px);
	width:10px;
	height:10px
}
100% {
	transform:translate(120px,-40px);
	width:0;
	height:0
}
}@keyframes trail-dots-after {
	0% {
	transform:translate(0px,0px);
	width:10px;
	height:10px
}
100% {
	transform:translate(120px,-40px);
	width:0;
	height:0
}
}@-webkit-keyframes trail-rotate {
	0% {
	transform:rotateY(0deg)
}
50% {
	transform:rotateY(180deg)
}
100% {
	transform:rotateY(360deg)
}
}@keyframes trail-rotate {
	0% {
	transform:rotateY(0deg)
}
50% {
	transform:rotateY(180deg)
}
100% {
	transform:rotateY(360deg)
}
}@-webkit-keyframes trail-trace {
	0% {
	-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);
	clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)
}
95% {
	-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);
	clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)
}
98% {
	-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
	clip-path:polygon(0 0,100% 0,100% 100%,0 100%)
}
100% {
	-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);
	clip-path:polygon(0 0,0 0,0 100%,0 100%)
}
}@keyframes trail-trace {
	0% {
	-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);
	clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)
}
95% {
	-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);
	clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)
}
98% {
	-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
	clip-path:polygon(0 0,100% 0,100% 100%,0 100%)
}
100% {
	-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);
	clip-path:polygon(0 0,0 0,0 100%,0 100%)
}
}@-webkit-keyframes triangle-p1 {
	0% {
	transform:translateY(0px);
	opacity:1;
	-webkit-clip-path:polygon(0 0,0 45%,90% 45%);
	clip-path:polygon(0 0,0 45%,90% 45%)
}
80% {
	transform:translateY(-50px) rotate(15deg);
	opacity:0;
	-webkit-clip-path:polygon(0 0,20% 45%,90% 45%);
	clip-path:polygon(0 0,20% 45%,90% 45%)
}
100% {
	transform:translateY(-50px) rotate(15deg);
	opacity:0;
	-webkit-clip-path:polygon(0 0,20% 45%,90% 45%);
	clip-path:polygon(0 0,20% 45%,90% 45%)
}
}@keyframes triangle-p1 {
	0% {
	transform:translateY(0px);
	opacity:1;
	-webkit-clip-path:polygon(0 0,0 45%,90% 45%);
	clip-path:polygon(0 0,0 45%,90% 45%)
}
80% {
	transform:translateY(-50px) rotate(15deg);
	opacity:0;
	-webkit-clip-path:polygon(0 0,20% 45%,90% 45%);
	clip-path:polygon(0 0,20% 45%,90% 45%)
}
100% {
	transform:translateY(-50px) rotate(15deg);
	opacity:0;
	-webkit-clip-path:polygon(0 0,20% 45%,90% 45%);
	clip-path:polygon(0 0,20% 45%,90% 45%)
}
}@-webkit-keyframes triangle-p2 {
	0% {
	-webkit-clip-path:polygon(0 45%,0 100%,90% 45%);
	clip-path:polygon(0 45%,0 100%,90% 45%)
}
100% {
	-webkit-clip-path:polygon(0 0,0 100%,90% 45%);
	clip-path:polygon(0 0,0 100%,90% 45%)
}
}@keyframes triangle-p2 {
	0% {
	-webkit-clip-path:polygon(0 45%,0 100%,90% 45%);
	clip-path:polygon(0 45%,0 100%,90% 45%)
}
100% {
	-webkit-clip-path:polygon(0 0,0 100%,90% 45%);
	clip-path:polygon(0 0,0 100%,90% 45%)
}
}@-webkit-keyframes paper-rotate {
	0% {
	transform:rotateY(0deg)
}
50% {
	transform:rotateY(180deg)
}
100% {
	transform:rotateY(360deg)
}
}@keyframes paper-rotate {
	0% {
	transform:rotateY(0deg)
}
50% {
	transform:rotateY(180deg)
}
100% {
	transform:rotateY(360deg)
}
}@-webkit-keyframes paper-balance {
	0% {
	transform:rotate(-20deg)
}
10% {
	transform:rotate(-35deg)
}
100% {
	transform:rotate(-35deg)
}
}@keyframes paper-balance {
	0% {
	transform:rotate(-20deg)
}
10% {
	transform:rotate(-35deg)
}
100% {
	transform:rotate(-35deg)
}
}@-webkit-keyframes paper-move {
	0% {
	transform:translate(40%,40%)
}
50% {
	transform:translate(50%,0%)
}
100% {
	transform:translate(60%,40%)
}
}@keyframes .........完整代码请登录后点击上方下载按钮下载查看