您的位置：首页 > Web前端 > CSS

CSS-动画效果

2013-12-30 20:35 330 查看




采用CSS3实现的简易的动画效果-图片旋转

<!DOCTYPE html>
<html>
<head>
    <meta
charset="utf-8">
   
<title>CSS3动画</title>
   
<style>
     
  .amime1{
     
     
text-align: center;
     
      font-size:
64px;
     
     
-webkit-animation-name:"anime1";指定动画的名称
     
     
-webkit-animation-duration:10s;动画持续的时间以s作为单位
     
   
  
     
     -webkit-animation-timing-function表示的是动画的时机，参数有如下
   
     
  ease 让开始与结束更加平滑
   
     
  linear 持续
   
     
  ease-in 慢慢开始
   
     
  ease-out慢慢结束
   
     
  ease-in-out 慢慢开始慢慢结束
   
     
 
cubic-bezier(x1,y1,x2,y2)通过(x1,y1,x2,y2)指定三次贝塞尔曲线的P1与P2
     
   
  
     
     
-webkit-animation-timing-function:ease;
     
     
-webkit-animation-iteration-count:infinite;指定动画的动作次数,指定"3",或者"infinite无数次"
     
  }
     
  
     
 首先定义动画时使用@keyframes规则。后边跟的是动画的名称，keyframe关键帧的单位为%
     
  
     
  @-webkit-keyframes "anime1"{
     
      0%
{-webkit-transform:rotate(0deg);}
     
      50%
{-webkit-transform:rotate(90deg);}
     
      100%
{-webkit-transform:rotate(0deg);}
     
  }

   
</style>
</head>
<body>
   
 <br>
   
 <div
class="amime1"><img
src="images/shadow1.jpg"
width="300px"></div>
   
 <br><br>
   
 <div
class="amime1"><img
src="images/shadow2.jpg"
width="300px;"></div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航