<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>用css3仿制js的弹力效果</title>

</head>

<body>

<style type="text/css">

*{margin:0;padding:0px;}

    body{background:#b1b1b1;font-family:Arial;font-size:125%;color:#202020;}

    .tips{width:600px;margin:0 auto;line-height:24px;padding-top:10px;font-size:14px;}

.bredcolor{color:#fff;}

    .envelope{

        font:120px bold 'Arial Rounded MT Bold';color:#fff;

        position:absolute;top:50%;left:50%;margin-left:-422px;margin-top:-69px;

    }

    .envelope_site{

        -webkit-transform-style: preserve-3d;/* 去除文字的闪动 */

        -webkit-transform:translateY(0px);

        -webkit-animation:envelope .2s ease-in,envelope_top .7s linear .2s;

    }

    .envelope_site h1{

        text-shadow: 4px 3px 4px #818181;font-family:'Arial Rounded MT Bold';

        letter-spacing:2px;

        -webkit-transform:translateY(-30px);

        -webkit-transition:-webkit-transform .9s linear 1s;

    }

    @-webkit-keyframes envelope{

        0%{top:0;left:100%;margin-left:0px;margin-top:-69px;-webkit-transform:translateY(0px);}

        100%{top:50%;left:50%;margin-left:-276px;margin-top:-69px;-webkit-transform:translateY(0px);}

    }

    @-webkit-keyframes envelope_top{

        0%{-webkit-transform:translateY(0px);}

        20%{-webkit-transform:translateY(-80px);}

        40%{-webkit-transform:translateY(0px);}

        60%{-webkit-transform:translateY(-30px);}

        80%{-webkit-transform:translateY(0px);}

        90%{-webkit-transform:translateY(-10px);}

        100%{-webkit-transform:translateY(0px);}

    }

</style>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<section class="envelope envelope_site" id="envelope">

        <h1>css3tra<span class="i_hiden">i</span>n</h1>

</section>

</body>

</html>

css3使用transform属性制作js弹性运动的更多相关文章

  1. css3之transform属性实现div不定宽高垂直水平居中

    transform的作用 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.(w3cschool) transform的兼容性 transfor ...

  2. CSS3中transform属性的用法

    有时候网站也要愚弄一下访客,比如愚人节.下面我给大家推荐个效果,就是整个页面左右颠倒了.css3 很强大,简单的几行代码就可以帮我们实现这个效果. view source   print? 01 &l ...

  3. CSS3的transform属性

    CSS3的一些属性可能比较新,有一些书从国外翻译到国内的时间上会延缓1-2年.所以有一些东西还需要及时整理. 下面说一下CSS3的一个属性:transform 其实字面上的意思已经很明显了就是变化,变 ...

  4. [Js]弹性运动

    描述:像弹簧一样左右弹动,最后缓慢停下来 一.加减速运动 1.加速运动 var iSpeed=0;iSpeed++; 速度越来越快,最后冲出去 2.减速运动 var iSpeed=20;iSpeed- ...

  5. 利用CSS3的transform 3D制作的立方体旋转效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 通过js获取元素css3的transform rotate旋转角度方法

    我们再试用jquery获取样式的时候是通过$('domName').css('transform'):的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现 ...

  7. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  8. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  9. 纯css3样式属性制作各种图形图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. DBLINK做系统集

    过度使用DBLINK做系统集成会带来的问题 过度使用DBLINK做系统集成会带来很多问题,问题主要由以下几点: 1. 大量消耗数据库资源: 本地系统每通过DBLINK链接远端系统一次,都会生成一个本地 ...

  2. 原生js大总结四

    031.数组常用的一些方法   1.push: 在数组最后添加一个或者多个元素,返回添加后数组的长度   2.pop: 从数组最后取出一个元素,返回的是数组的最后一个元素(取出的元素)   3.uns ...

  3. POJ 2376 Cleaning Shifts 区间覆盖问题

    http://poj.org/problem?id=2376 题目大意: 给你一些区间的起点和终点,让你用最小的区间覆盖一个大的区间. 思路: 贪心,按区间的起点找满足条件的并且终点尽量大的. 一开始 ...

  4. 3.Docker安装【Docker每天5分钟】

    原文:3.Docker安装[Docker每天5分钟] Docker给PaaS世界带来的“降维打击”,其实是提供了一种非常便利的打包机制.该机制打包了应用运行所需要的整个操作系统,从而保证了本地环境和云 ...

  5. 【Codeforces Round #433 (Div. 2) A】Fraction

    [链接]h在这里写链接 [题意] 在这里写题意 [题解] 枚举分子从高到低就好. 这样得到的一定是最大的. (可以约分没错,但是约分过后和就不是n了,所以不会有错的) [错的次数] 0 [反思] 在这 ...

  6. 【MemSQL Start[c]UP 3.0 - Round 1 E】Desk Disorder

    [链接]h在这里写链接 [题意] 有N个人. 2N个座位. 现在告诉你这N个人它们现在的座位.以及它们想去的座位. 每个人可以去它们想去的座位或者就站在原地不动. 新的座位和旧的座位,都不允许一个座位 ...

  7. BZOJ 3038 上帝造题的七分钟2 树状数组+并查集

    题目大意:一个序列,有两种操作.1.将一段数中的每个数开根号.2.查询一段数的和. 思路:和3211是一个题,有兴趣的能够看看我的那篇博客. CODE: #include <cmath> ...

  8. UVA 10047 - The Monocycle BFS

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  9. JMS服务器ActiveMQ的初体验并持久化消息到MySQL数据库中

    JMS服务器ActiveMQ的初体验并持久化消息到MySQL数据库中 一.JMS的理解JMS(Java Message Service)是jcp组织02-03年定义了jsr914规范(http://j ...

  10. 判断是iphone或是ipad 和 系统版本

    //判断是iphone或是ipad等 NSLog(@"Device -- %@",[UIDevice currentDevice].model); //系统版本 NSLog(@&q ...