HTML里css画蝴蝶,纯css制作煽动翅膀的蝴蝶(原创)

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;

}