css3使用transform属性制作js弹性运动

原创 2015年07月09日 13:23:57
<!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>

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

js动画之匀速运动、缓冲运动、弹性运动、碰撞运动、属性变化动画

源代码地址:github地址https://github.com/wwyao/wwy 效果如下:

CSS3--利用transform和transition属性制作扇形导航

在前面,我们已经讲解了transform这个属性以及案例,那么本文会进一步结合transform和transition两个属性,并制作一个简单的案例进行说明。 一、transition属性说明 接下来...

CSS3--利用transform属性制作时钟效果

首先简单总结一下transform这个属性,transform的含义是:改变,使…变形;转换。 transform的常用属性:        1)rotate()  旋转函数 取值度数     ...

CSS3弹性布局内容对齐(justify-content)属性使用详解

内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。 该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配...

CSS3弹性布局内容对齐(justify-content)属性使用详解

内容调整(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。 该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配...
  • iefreer
  • iefreer
  • 2016年03月01日 22:02
  • 23283

transform-style ~ animation (css3星环运动)

transform--style属性指定嵌套元素是怎样在三维空间中呈现。 值 描述 flat 子元素将不保留其 3D 位置。 preserve-3d 子元素将保留其 3D ...

关于CSS3中transform属性对元素布局的影响。

今天了解transform属性时发现一个奇怪的现象,就是使用transform属性的时候,无论是translate,rotate,skew还是scale,对于伪元素:after和:before,都会产...
  • C860_zy
  • C860_zy
  • 2013年12月26日 23:44
  • 2415

transform属性——css3变形效果2D

一、transform           该属性允许我们对元素进行移动、缩放、旋转或倾斜 transform的属性值如下所示: 1、none                    无变换 2、tr...
  • MOONCOM
  • MOONCOM
  • 2017年01月15日 20:58
  • 592
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3使用transform属性制作js弹性运动
举报原因:
原因补充:

(最多只允许输入30个字)