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

  发布时间:2018-04-23 16:16:07   作者:李佳明同学   我要评论
这篇文章主要介绍了纯css3制作煽动翅膀的蝴蝶的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

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

怎么样,效果还不错吧

上代码:

html

1
2
3
4
5
<div id="butterfly">
    <div class="leftSide"></div>
    <div class="body"></div>
    <div class="rightSide"></div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
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下载地址

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

蓄力AI

相关文章

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

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

    本文解析了CSS属性box-shadow的用法和应用,属性可以设置一个或多个下拉阴影的框,通过box-shadow属性,可以定义水平阴影的位置、垂直阴影的位置、模糊距离、阴影的大小和颜色
    2024-10-21
  • CSS3中的@media查询常见问题

    CSS3的@media查询功能允许我们根据不同的媒体类型和设备特性来应用不同的样式规则,,本文详细探讨了@media查询的定义、语法、使用场景及注意事项,旨在帮助开发者更好地理解
    2024-10-17
  • CSS3 新特性 box-shadow 阴影效果、圆角border-radius效果实现

    CSS3的border-radius属性可以轻松制作圆角效果,支持一至四个值来分别定义四个角的圆角大小,一个值时所有角圆角相同,两个值时对角线上的角相同,本文给大家介绍CSS3 新特性 b
    2024-10-17
  • 如何保持CSS3动画结束状态不变

    CSS3动画为网页设计带来了丰富的动态效果,使得页面更加生动和吸引人,然而,有时我们希望动画在结束时保持最终状态,而不是回到初始状态,本文将介绍几种方法来实现这一效果
    2024-10-15
  • CSS3 伪元素与伪类选择器区别与应用实例详解

    伪元素和伪类都增强了CSS选择器的功能,但它们有明显的区别,伪元素通过::表示,如::before和::after,用于向元素添加或修改内容,伪类则通过:表示,如:hover和:first-child,用于
    2024-10-15
  • 如何使用CSS3进行样式效果增强

    本文介绍了使用CSS3实现各种样式效果的方法,包括文字渐变、圆角、阴影、多重背景等,通过实例代码,展示了如何简洁有效地增强网页视觉效果,无需额外图像或复杂脚本,适合前端
    2024-09-13
  • css3实现动态滚动播放列表功能

    在Web开发中,动态滚动播放列表能够提升用户体验,使内容展示更加生动有趣,本文介绍了如何仅使用CSS3实现一个基础的循环播放列表,其中关键技术包括@keyframes规则和animat
    2024-09-11
  • CSS3动画实现多个跳动小球效果(语音输入动画)

    之前有做过一个需求,安卓端嵌H5页面,实现语音输入并包含输入时动画,跳动的小球,多个小球同时跳动,相对定位需要left不相同,其次每个小球动画开始有时间差,其次就是小
    2024-08-29
  • 详解CSS3 边框样式(包含border-radius、border-image与box-shadow)

    这篇文章主要介绍了CSS3 边框样式(包含border-radius、border-image与box-shadow)的相关知识,本文给大家介绍的非常详细,,需要的朋友可以参考下
    2024-08-29

最新评论