脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 >

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

  发布时间：2018-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 最强二维布局系统之Grid 网格布局

    CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介绍CSS3 最强二维布局系
    2025-02-27

  • 如何使用CSS3实现波浪式图片墙

    本文介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同
    2025-02-27

  • CSS3模拟实现一个雷达探测扫描动画特效(最新推荐)

    文章介绍了如何使用CSS3实现一个雷达探测扫描的效果,包括夜色背景、蜘蛛网盘、扫描体的转动效果、尾巴阴影以及被扫描到的光点,通过HTML和CSS的配合,实现了丰富的动画效果,
    2025-02-21

  • css3 display:flex 弹性盒模型的使用方法

    CSS3的Flexbox是一种强大的布局模式,通过设置display:flex可以轻松实现对齐、排列和分布网页元素,它解决了传统布局方法中的对齐、间距分配和自适应布局等问题,接下来通过本
    2025-02-19

  • css3 实现icon刷新转动效果

    本文给大家介绍css3 实现icon刷新转动效果，文章开头给大家介绍了webkit-transform、animation、@keyframes这三个属性，结合实例代码给大家介绍的非常详细，感兴趣的朋友一
    2025-02-19

  • CSS3动态效果之过渡属性(最新推荐)

    CSS3过渡属性用于实现元素从一种样式平滑过渡到另一种样式,通过设置transition-property过渡属性、transition-duration过渡时长transition-timing-function过渡函数和trans
    2025-02-19

  • CSS3实现动态旋转加载样式的示例代码

    本文介绍了如何使用CSS3创建一个简单的动态旋转加载样式,通过定义一个带有类名“loader”的HTML元素,并使用CSS样式和@keyframes规则来实现旋转动画,你可以根据需要调整样式
    2025-02-19

  • 使用CSS3实现平滑的过渡动画效果(实例代码)

    这篇文章主要介绍了如何使用CSS3的transition属性实现平滑的过渡动画，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧
    2025-02-13

  • CSS3中使用flex和grid实现等高元素布局的示例代码

    本文介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果，感兴趣的朋
    2025-02-11

  • 使用CSS3和SVG创建圆形进度条动画效果

    CSS3和SVG的结合使用为网页设计带来了创新的动态视觉效果,本文通过一个圆形进度条的动画特效示例,展示了如何利用CSS3的动画功能和SVG的矢量图形能力来创建丰富的用户交互体
    2024-10-24

最新评论

关注微信公众号

扫一扫