纯css3制作煽动翅膀的蝴蝶的示例

互联网   04-23 16:16:07   作者:李佳明同学   我要评论

这篇文章主要介绍了纯css3制作煽动翅膀的蝴蝶的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

纯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

  1. 通过 @keyframes 规则,我们能够创建动画
  2. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式
  3. 以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
  4. 0% 是动画的开始时间,100% 动画的结束时间

transform: rotateY()

  1. transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
  2. rotateY()定义沿着 Y 轴的 3D 旋转。

这张图很直观的说明了xyz轴,其实学过3DS MAX这类3d建模软件的同学应该更为熟悉这个3轴的指向。

实现思路:先用子绝父相将左翅膀,右翅膀,和身体进行绝对定位,拼合在一起,然后利用transform的rotateY使其沿y轴旋转,旋转这里使用@keyframe动画,然后重复动作。

还要重点介绍下transform-style: preserve-3d;这个属性,w3c 的说明是 使被转换的子元素保留其 3D 转换。也就是所有子元素在3D空间中呈现,相反设置为flat的话,则所有子元素在2D空间中呈现

demo下载地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • CSS3实现多样的边框效果

    本文通过实例代码给大家介绍了基于csss3实现多样的边框效果,有半透明边框,多重边框,边框内圆角,具体效果图和实现代码大家参考下本文
    2018-05-04
  • 纯css3制作煽动翅膀的蝴蝶的示例

    这篇文章主要介绍了纯css3制作煽动翅膀的蝴蝶的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-23
  • CSS3使用transition属性实现过渡效果

    CSS3中新增的transform属性,可以实现元素在变换过程中的过渡效果,实现了基本的动画。下面通过本文给大家介绍CSS3使用transition属性实现过渡效果,需要的朋友参考下本文
    2018-04-18
  • CSS3 二级导航菜单的制作的示例

    这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-02
  • CSS3实现全景图特效示例代码

    这篇文章主要介绍了CSS3实现全景图特效示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-26
  • css3新单位vw、vh的使用教程

    这篇文章主要介绍了css3新单位vw、vh的使用教程,本文通过实例代码给大家介绍vw、vh、vmin、vmax 的含义及vw、vh与%百分比的区别,感兴趣的朋友一起看看吧
    2018-03-23
  • 巧用CSS3的calc()宽度计算做响应模式布局的方法

    本篇文章主要介绍了巧用CSS3的calc()宽度计算做响应模式布局的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-22
  • 利用css3径向渐变做一张优惠券的示例

    这篇文章主要介绍了利用css3径向渐变做一张优惠券的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-22
  • css3 边框、背景、文本效果的实现代码

    这篇文章主要介绍了css3 边框、背景、文本效果的实现代码,需要的朋友可以参考下
    2018-03-21
  • 利用CSS3 动画 绘画 圆形动态时钟

    这篇文章主要介绍了利用CSS3 动画 绘画 圆形动态时钟的相关资料,需要的朋友可以参考下
    2018-03-20

最新评论