CSS-动画效果

CSS-动画效果

采用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>

你可能感兴趣的:(CSS-动画效果)