纯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 相关文章推荐
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
HTML中的表单元素介绍
Feb 28 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 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
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
django从后台返回html代码的实例
2020/03/11 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
女大学生自我鉴定
2013/12/09 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
2014年车间工作总结
2014/11/21 职场文书
市级三好学生评语
2014/12/29 职场文书
护士求职自荐信范文
2015/03/04 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL