純css3制作煽動翅膀的蝴蝶，先看效果
怎么樣，效果還不錯吧
上代碼：
html
| <div id="butterfly"> <div class="leftSide"></div> <div class="body"></div> <div class="rightSide"></div></div> |
css
| body{ background: url("./images/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("./images/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("./images/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("./images/rightSide.png") no-repeat; position: absolute; right: 26px; top: 58px; animation: right 2s infinite; z-index: 9999; } |
在這之前介紹幾個css屬性；
@keyframes
新聞熱點
疑難解答
