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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

我的前端学习笔记 css3 gradient,transform,transition ,弹性盒子

去公司以后每天都很忙很久没打理博客了,希望接下来能够整理一下之前学习到的知识。 先简单回顾下css3一些新的特性吧,以chrome为例 渐变色 gradient 线性渐变语法:backgroun...

jQuery层动画定位滑动效果代码

一款基于jQuery的层动画效果,点击左上角的按钮,层会按照预先设置好的运动轨迹运动,减少动画帧数可得到更平滑的效果,本效果可以在火狐、IE/OPERA等浏览器下运行,无异常。

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

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

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

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

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

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

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

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

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

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

CSS3新增的弹性盒模型(Flexible Box)属性

CSS3新增的弹性盒模型(Flexible Box)

CSS3弹性布局align-items和align-self垂直轴方向行对齐属性详解及实例

弹性项目可以按弹性容器当前行的cross axis来对齐,和justify-content类似,但在垂直方向上。其中align-items属性用于弹性容器,而align-self用于弹性项目。 ali...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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