Html
    Css
    Js

    
                        
body {
	background:url("//www.jq22.com/gxwj/bg.jpg") no-repeat;
}
#butterfly {
	width:600px;
	height:500px;
	position:relative;
	transform:scale(0.35);
	transform-style:preserve-3d;
}
.leftSide {
	width:267px;
	height:421px;
	background:url("//www.jq22.com/gxwj/leftSide.png") no-repeat;
	position:absolute;
	left:26px;
	top:40px;
	animation:left 2s infinite;
	z-index:9999;
}
@keyframes left {
	0% {
	transform:rotateY(0deg);
	transform-origin:right center;
	perspective:201px;
}
50% {
	transform:rotateY(70deg);
	transform-origin:right center;
	perspective:201px;
}
100% {
	transform:rotateY(0deg);
	transform-origin:right center;
	perspective:201px;
}
}@keyframes right {
	0% {
	transform:rotateY(0);
	transform-origin:left center;
	perspective:201px;
}
50% {
	transform:rotateY(-70deg);
	transform-origin:left center;
	perspective:201px;
}
100% {
	transform:rotateY(0);
	transform-origin:left center;
	perspective:201px;
}
}.body {
	width:152px;
	height:328px;
	background:url("//www.jq22.com/gxwj/body.png") no-repeat;
	position:absolute;
	margin:auto;
	left:0;
	right:0;
	bottom:0;
	top:0;
	z-index:9999;
}
.rightSide {
	width:284px;
	height:460px;
	background:url("//www.jq22.com/gxwj/rightSide.png") no-repeat;
	position:absolute;
	right:26px;
	top:58px;
	animation:right 2s infinite;
	z-index:9999;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯css制作煽动翅膀的蝴蝶(原创)

0