纯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 伪元素和伪类选择器详解
Sep 04 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
CSS的class与id常用的命名规则
May 18 HTML / CSS
html中两种获取标签内的值的方法
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
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
Python读取指定日期邮件的实例
2019/02/01 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
python关于调用函数外的变量实例
2019/12/26 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
政法学院毕业生求职信
2014/02/28 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
yolov5返回坐标的方法实例
2022/03/17 Python
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js