純css3制作煽動翅膀的蝴蝶的示例

2024-07-11 08:59:11

字體：大中小

來源：轉載

供稿：網友

純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