欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS3 >

Css3动画属性

 

Transform动画属性

transform 属性向元素应用 2D 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

 

      rotate3d(x,y,z,angle)  x,y,z那个属性 1 就围绕那个轴转动  角度deg

 

@keyframes  name 预定义效果

animation 属性是一个简写属性,用于设置六个动画属性:

案列;

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<link href="css/index.css" rel="stylesheet" type="text/css" />

</head>

<style type="text/css">

*{

      margin:0px;

      padding:0px;    

}

img{ display:block;}

.wrap{

      border:1px solid #ff0000;

      width:380px;

      height:565px;

      margin:0 auto;

      position:relative;

      top:50px;   

      -webkit-animation:upDown 2s linear infinite;

}

@-webkit-keyframes upDown{

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

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

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

}

@-webkit-keyframes rota_head{

      0%{-webkit-transform:rotate(0);}    

      50%{-webkit-transform:rotate(-5deg);}

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

}

.head{

      border:1px solid #ff0000;

      position:absolute;

      top:10px;

      left:0;

      z-index:1;   

      -webkit-animation:rota_head 2s linear infinite;

}

@-webkit-keyframes eye_open{

      0%{opacity:1;}

      85%{opacity:1;}

      90%{opacity:0;}     

      100%{opacity:1;}   

}

.eye_open{

      position:absolute;

      top:25px;

      left:40px;

      -webkit-animation:eye_open 2s linear infinite;

}

@-webkit-keyframes eye_close{

      0%{opacity:0;}

      85%{opacity:0;}

      90%{opacity:1;}     

      100%{opacity:0;}   

}

.eye_close{

      position:absolute;

      top:37px;

      left:40px;   

      -webkit-animation:eye_close 2s linear infinite;

 

}

.body{

      position:absolute;top:25px;left:8px;

}

.foot{ position:absolute;left:8px;bottom:0px;}

  </style>

<body>

<div class="wrap">

      <div class="head">

          <img src="imgs/sprite_43.png" alt="">

        <img src="imgs/shape_45.png" alt="" class="eye_open">

        <img src="imgs/shape_46.png" alt="" class="eye_close">

    </div>

    <div class="body">

          <img src="imgs/sprite_40.png">

    </div>

    <div class="foot">

          <img src="imgs/shape_41.png">

    </div>

</div>

</body>

</html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c14317.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2016-11-13 16:44 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。