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


Posted in HTML / CSS onApril 23, 2018

纯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 旋转。

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

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

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

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

demo下载地址

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

HTML / CSS 相关文章推荐
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
HTML高亮关键字的实现代码
Oct 22 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
分享几个实用的CSS代码块
Jun 10 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 #HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 #HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 #HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 #HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 #HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 #HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 #HTML / CSS
You might like
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
在WIN98下以apache模块方式安装php
2006/10/09 PHP
php UTF8 文件的签名问题
2009/10/30 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
vuex入门最详细整理
2020/03/04 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
python机器学习之随机森林(七)
2018/03/26 Python
Python-接口开发入门解析
2019/08/01 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
了解一下python内建模块collections
2020/09/07 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
医院办公室主任职责
2013/12/29 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
党员理论学习心得体会
2016/01/21 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python