利用css3制作煽动翅膀的蝴蝶的代码-tutorial css-php.cn

利用css3制作煽动翅膀的蝴蝶的代码

不言

Lepaskan： 2018-06-20 15:19:53

asal

4077 orang telah melayarinya

这篇文章主要介绍了纯css3制作煽动翅膀的蝴蝶的示例的相关资料，内容挺不错的，现在分享给大家，也给大家做个参考。

纯css3制作煽动翅膀的蝴蝶，先看效果

怎么样，效果还不错吧

上代码：

html

<p id="butterfly">
    <p class="leftSide"></p>
    <p class="body"></p>
    <p class="rightSide"></p>
</p>

Salin selepas log masuk

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;
        }

Salin selepas log masuk

在这之前介绍几个css属性；

@keyframes