新年已经到来,各个网站都举办着各种不同类型的活动,'会呼吸的信封'有可能就是你遇到的其中一种.其实就是一个信封的样式,在封口处加上开合开合的动画效果,吸引用户去打开这个信封,点击后可能会送红包,优惠券或介绍其他相关的活动内容.

动画原理非常简单:先写出信封的样式,然后将封口处的元素使用rotateX旋转。这其中用到的技术就是3D transform的运用。

1. 先看截图

2. 代码实现思路

2.1写出信封的样式。

利用样式实现三角形的形状一般有两种做法：一是使用边框，二是使用方形的元素旋转。第一种办法灵活性好，宽高灵活设置。

2.2对封面的元素定义动画。

封面的元素也为三角形形状，一开一合的效果其实就是元素绕着X轴旋转。使用3D的transform效果设置如下：

-webkit-transform-style:preserve-3d;-webkit-perspective:1500;-webkit-transform-origin:0 0;

具体的属性说明参考如下：http://www.w3school.com.cn/css3/css3_3dtransform.asp

动画的设置如下：

-webkit-animation:breath 1.2s ease infinite alternate;、

具体的属性说明参考如下：http://www.w3school.com.cn/cssref/pr_animation.asp

2. 源代码

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">

 <title>CSS3效果之会呼吸的信封</title>

 <meta name="author" content="rainna" />

 <meta name="keywords" content="rainna's css lib" />

 <meta name="description" content="CSS3" />

 <style>

 *{margin:0;padding:0;}

 body{background:#f0f0f0;}

 /* 信封样式1 */

 .m-envelope,.m-envelope2{position:relative;width:602px;height:382px;margin:100px auto;background:#F1F1F1;overflow:hidden;}

 .m-envelope:before,.m-envelope:after{content:'';position:absolute;left:0;top:1px;width:0;height:0;border-left:235px solid #FFFAF7;border-top:190px solid transparent;border-bottom:190px solid transparent;}

 .m-envelope:after{right:0;left:auto;-webkit-transform:rotate(180deg);}

 .m-envelope .item,.m-envelope .item2{position:absolute;left:1px;bottom:0;width:0;height:0;border-bottom:242px solid #FFF7FE;border-left:300px solid transparent;border-right:300px solid transparent;}

 .m-envelope .item2{top:0;bottom:auto;z-index:2;border-top:250px solid #F1F1F1;border-bottom:none;}

 .m-envelope .item2-cover{border-top:246px solid #fff;}

 .m-envelope .item2-cover:before{content:'帮我打开';position:absolute;left:-8px;top:-190px;color:#99c800;line-height:2;font-weight:bold;}

 /* 信封封面动画样式1 */

 .m-envelope .item2-cover{-webkit-transform-style:preserve-3d;-webkit-perspective:1500;-webkit-transform-origin:0 0;-webkit-animation:breath 1.2s ease infinite alternate;}

 @-webkit-keyframes breath{

     100%{-webkit-transform:rotateX(20deg);}

 }

 /* 信封样式2 */

 .m-envelope2{background:#fff;}

 .m-envelope2:before,.m-envelope2 .item{content:'';position:absolute;left:0;top:100%;width:422px;height:422px;border-width:2px;border-style:solid;border-color:#F1F1F1 #F1F1F1 transparent transparent;-webkit-transform-origin:left top;-webkit-transform:rotate(-45deg);}

 .m-envelope2 .item{top:0;border-color:transparent transparent #F1F1F1 #F1F1F1;background:#F1F1F1;}

 .m-envelope2 .item-cover{background:#fff;}

 /* 信封封面动画样式2 */

 .m-envelope2 .f-trans{-webkit-transform-style:preserve-3d;-webkit-perspective:1500;-webkit-transform-origin:0 0;-webkit-animation:breath 1.2s ease infinite alternate;}

 </style>

 </head>

 <body>

 <div class="m-envelope">

     <div class="item"></div>

     <div class="item2"></div>

     <div class="item2 item2-cover"></div>

 </div>

 <div class="m-envelope2">

     <div class="item"></div>

     <div class="f-trans">

         <div class="item item-cover"></div>

     </div>

 </div>

 </body>

 </html>

源码下载:http://pan.baidu.com/s/1o6iI9tC

CSS 动画之九-会呼吸的信封的更多相关文章

  1. CSS动画总结与呼吸灯效果

    首先,先介绍一下主要用到的css属性:animation,text-shadow. text-shadow就不再介绍了,上一篇已经详细介绍了用法.这里先介绍一下animation属性. 1.anima ...

  2. 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  5. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  6. [css]我要用css画幅画(九) - Apple Logo

    接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...

  7. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  8. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  9. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

随机推荐

  1. 深入理解java虚拟机（1）------内存区域与内存溢出

    在C++领域,关于C++的内存存储,结构等等,有一本书:深度探索C++对象模型,讲解的非常透彻. 而Java确把这一工作交给了虚拟机来处理. 我们首先来看看关于内存的问题. 1.问题: 1)java ...

  2. node.js之看懂package.json依赖库版本控制

    金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉.node.js依赖库的版本控制 一般node.js项目会依赖大量第三方module, 那么如何控制modu ...

  3. 浅谈 sql 中数据的约束

    数据约束 --对用户操作表的数据进行约束 1.默认值 --当用户对使用默认值的字段不插入值的时候,就使用默认值 1)对默认值字段插入null是可以的. 2)对默认值字段可以插入非null [例如:ad ...

  4. Bootstrap 类解析

    Bootstrap 类解析 元素 Bootstrap 类 定义 <div> container 内容容器 <table> table 表格 <table> tabl ...

  5. PL/SQL之--触发器

    一.简介 触发器在数据库里以独立的对象进行存储,它与存储过程和函数不同的是,存储过程与函数需要用户显示调用才执行,而触发器是由一个事件来触发运行.oracle事件指的是对数据库的表或视图进行的inse ...

  6. 有关RDS上只读实例延时分析-同适用于自建MySQL主从延时分析判断

    个人不是很喜欢在技术上跟人互喷,尤其是不在同一个岗位上的人.一方面本人的性格如此,另一方面,我自身的口水也确实是不行,人生经历了第一次的双11洗礼,在大促的环境下,总算知道了有些东西是否应该规避,这次 ...

  7. 【转】App开发者必备的运营、原型、UI设计工具整理

    一.运营类 1. APPVIEW,网址:http://lab.hakim.se/appview/ 帮助iOS 应用开发者追踪所有地区App Store最近的用户评论,可以按时间.评分.地区排序,缺点是 ...

  8. 基于注解配置的Spring MVC 简单的HelloWorld实例应用

    2.1 问题 使用注解的方式重构helloworld应用案例. 2.2 方案 1. @RequestMapping注解应用 @RequestMapping可以用在类定义和方法定义上,它标明这个类或方法 ...

  9. C++ 基本知识

    无论父类与子类的析构函数是否是virutal,子类的析构函数都会调用父类的析构函数 调用构造函数是与构造函数顺序相反,先子类后基类,否则如果基类先析构,子类的有些资源已经不存在了,会出错. 在C++中 ...

  10. [转]ActionScript 3.0入门：Hello World、文件读写、数据存储(SharedObject)、与JS互调

    本文转自:http://www.cnblogs.com/artwl/p/3396330.html 近期项目中可能要用到Flash存取数据,并与JS互调,所以就看了一下ActionScript 3.0, ...