css3 transition effect(其它效果)
http://blog.csdn.net/jerryvon/article/details/8755548
整理了一些其它动画,用的模板为flip模板,只不过CSS3不同
- /***************** 淡入淡出 ********************/
- .effect5 .back {
- -webkit-transform: rotate3d(1,0,0,0);
- }
- .effect5.show .front{
- -webkit-animation: effect5Front 0.6s linear forwards;
- }
- @-webkit-keyframes effect5Front{
- 0% { opacity: 1; }
- 100% { opacity: 0; }
- }
- /***************** 向左边推入 ********************/
- .transition.effect6 { overflow: hidden; }
- .effect6.show .front,
- .effect6.show .back{
- -webkit-animation-duration: 0.4s;
- -webkit-animation-timing-function: ease-out;
- -webkit-animation-fill-mode: forwards;
- }
- .effect6.show .front{
- -webkit-animation-name: effect6Front;
- }
- .effect6.show .back {
- -webkit-animation-name: effect6Back;
- }
- @-webkit-keyframes effect6Front{
- 0% { -webkit-transform: translateX(0); }
- 100% { -webkit-transform: translateX(-100%); }
- }
- @-webkit-keyframes effect6Back{
- 0% { -webkit-transform: translateX(100%); }
- 100% { -webkit-transform: translateX(0px); }
- }
- /***************** 从某个角落盖上原来的图片 ********************/
- .effect7 .front{ z-index: 1; }
- .effect7 .back{ z-index: 2; }
- .effect7.show .back{
- -webkit-animation: effect7Back 0.4s ease-out forwards;
- }
- @-webkit-keyframes effect7Back{
- 0% { -webkit-transform: rotate(40deg) scale(1.5) translate(200px,10px); opacity: 0; }
- 100% { -webkit-transform: rotate(0deg) scale(1) translate(0,0); opacity: 1; }
- }
- /***************** 插扑克牌效果1 ********************/
- .effect8 .back {
- -webkit-transform: rotate3d(1,0,0,0);
- }
- .effect8 .front {
- z-index: 1;
- }
- .effect8 .back {
- z-index: 1;
- }
- .effect8.show .front{
- -webkit-animation: effect8Front 0.8s ease-in-out forwards;
- }
- @-webkit-keyframes effect8Front{
- 0% { -webkit-transform: translateX(0); z-index: 3;}
- 50% { -webkit-transform: rotateZ(-5deg) translateX(-339px); z-index: 3;}
- 51% { z-index: 1;}
- 100% { -webkit-transform: rotateZ(0deg) translateX(0px); z-index: 1;}
- }
- /***************** 插扑克牌效果2 ********************/
- .effect9 .back {
- -webkit-transform: rotate3d(1,0,0,0);
- }
- .effect9.show .front,
- .effect9.show .back{
- -webkit-animation-duration: 0.8s;
- -webkit-animation-timing-function: ease-in-out;
- -webkit-animation-fill-mode: forwards;
- -webkit-transform-origin: 0% 100%;
- }
- .effect9.show .front{
- -webkit-animation-name: effect9Front;
- }
- .effect9.show .back {
- -webkit-animation-name: effect9Back;
- }
- @-webkit-keyframes effect9Front{
- 0% { z-index: 3;}
- 50% { -webkit-transform: rotateZ(-75deg); z-index: 3;}
- 51% { z-index: 1;}
- 100% { -webkit-transform: rotateZ(0deg); z-index: 1;}
- }
- @-webkit-keyframes effect9Back{
- 0% { z-index: 1;}
- 50% { -webkit-transform: rotateZ(20deg); z-index: 1;}
- 51% { z-index: 3;}
- 100% { -webkit-transform: rotateZ(0deg); z-index: 3;}
- }
- /***************** 淡出效果2 ********************/
- .effect10 .back {
- -webkit-transform: rotate3d(1,0,0,0);
- }
- .effect10.show .front{
- -webkit-animation: effect10Front 0.4s ease-in-out forwards;
- }
- @-webkit-keyframes effect10Front{
- 0% { opacity:1; }
- 100% { -webkit-transform: rotateZ(3deg) scale(1.5); opacity:0; }
- }
- /***************** effect11 ********************/
- .effect11 .back {
- -webkit-transform: rotate3d(1,0,0,0);
- }
- .effect11.show .front{
- -webkit-transform-origin: 0% 100%;
- }
- .effect11.show .front{
- -webkit-animation: effect11Front 1s ease-in-out forwards;
- }
- @-webkit-keyframes effect11Front{
- 0% { z-index: 3; -webkit-animation-timing-function : ease-in }
- 20% { -webkit-transform: rotateZ(180deg); z-index: 3;-webkit-animation-timing-function : ease-out }
- 21% { z-index: 1; }
- 40% { -webkit-transform: rotateZ(370deg); z-index: 1; }
- 60% { -webkit-transform: rotateZ(356deg); z-index: 1; }
- 80% { -webkit-transform: rotateZ(360deg); z-index: 1; }
- 95% { -webkit-transform: rotateZ(359deg); z-index: 1; }
- 100% { -webkit-transform: rotateZ(360deg); z-index: 1; }
- }
- /***************** 中心点扩散显示(mask) ********************/
- .effect12 .back{
- -webkit-transform: rotate3d(1,0,0,0);
- }
- .effect12 .back {
- -webkit-mask-image: url(../../assets/circle-mask.png);
- -webkit-mask-repeat: no-repeat;
- -webkit-mask-position: 50% 50%;
- -webkit-mask-size: 1500px;
- -webkit-animation-duration: 1s;
- }
- .effect12.show .back{
- -webkit-animation-name: iris;
- z-index:3;
- }
- @-webkit-keyframes iris {
- 0% { -webkit-mask-size: 0; -webkit-animation-timing-function: ease-in-out; }
- 100% { -webkit-mask-size: 1500px; }
- }
css3 transition effect(其它效果)的更多相关文章
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- CSS3 transition实现超酷图片墙动画效果
一.前面的感慨以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等.但都是试试而已,知道有这么回事.今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了,我傻了, ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...
- css3 transition属性
最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...
- 纯css3艺术文字样式效果代码
效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...
- css3图片模糊过滤效果
css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 【转】CSS3 transition规范的实际使用经验
原文转自:http://blog.jobbole.com/56243/ 本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一 ...
随机推荐
- 分享jquery实现百叶窗特效的图片轮播
首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...
- Tween + 缓动函数
Unity-Tween http://www.cnblogs.com/MrZivChu/p/UnityTween.html iTween: iTween大解构(一)之抛物线移动 http://blog ...
- fastjson是阿里巴巴的开源JSON解析库
fastjson的API十分简洁. String text = JSON.toJSONString(obj); //序列化 VO vo = JSON.parseObject("{...}&q ...
- SSL、OPENSSL、SSH、OPENSSH
SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议.TLS与 ...
- app接口的简单案例 和一些总结
例一: 通过接口获取一篇文章.接口需要传入文章的id,通过sql语句向数据库查询文章的内容,然后以json的格式echo出即可,即:安卓或IOS工程师获取通过接口获取到了json格式的数据,在做进一步 ...
- kafka+zookeeper环境配置(Mac 或者 linux环境)
一.zookeeper下载与安装 1)下载 adeMacBook-Pro:zookeeper_soft apple$ wget http://mirrors.cnnic.cn/apache/zooke ...
- [Angularjs]表单验证
写在前面 在开发中提交表单,并对表单的值进行验证是非常常见的操作,angularjs对表单验证提供了非常好的支持. demo 表单 <form name="myform" n ...
- php页面防重复提交方法总结
1.提交按钮置disabled 当用户提交后,立即把按钮置为不可用状态.这种用js来实现. 提交前 复制代码 代码如下: $("#submit").attr('di ...
- Properties类的使用方法
它提供了几个主要的方法: 1. getProperty ( String key),用指定的键在此属性列表中搜索属性.也就是通过参数 key ,得到 key 所对应的 value. 2. load ( ...
- CSS 有关margin padding