2016.2.20 css3 animation 的学习

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2016.2.20 css3 animation 的学习相关的知识，希望对你有一定的参考价值。



















 
















使用css3 animation动画
 ‘use strict‘;
      var mousex, mousey;
      function tuo(el) {
        var move = function () {
          el.style.left = event.x - mousex + ‘px‘;
          el.style.top = event.y - mousey + ‘px‘;
        };
        el.addEventListener(‘mousedown‘, function () {
          mousex = event.x - el.offsetLeft;
          mousey = event.y - el.offsetTop;
          document.addEventListener(‘mousemove‘, move);
        });
        el.addEventListener(‘mouseup‘, function () {
          document.removeEventListener("mousemove", move, false);
        });
      };
      tuo(document.getElementById(‘box‘));
      tuo(document.getElementById(‘gradual‘));


 





<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      #box{
          width:400px;
          height:290px;
          position: absolute;
          left: 100px;
          top: 50px;
          overflow: hidden;
          box-shadow:0 0 30px rgba(0,0,0,1);
          background-size: cover;
          background-position: center;
          -webkit-animation-name: "loops";
          -webkit-animation-duration: 10s;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-timing-function: linera;/*线性变化*/
        }
        @-webkit-keyframes "loops" {
            0% {
                background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;
            }
            25% {
                background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
            }
            50% {
                background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
            }
            75% {
                background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
            }
            100% {
                background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
            }
        }
        .gradual {
          width: 200px;
          height: 200px;
          position: absolute;
          left: 600px;
          top: 50px;
          -webkit-animation-name: gradual;
          -webkit-animation-duration: 10s;
          -webkit-animation-iteration-count: infinite; /*无线循环动画*/
          -webkit-animation-timing-function: steps(4, start);/*帧数变化*/
          /*steps的设置都是针对两个关键帧之间的*/
        }
        @-webkit-keyframes gradual {
          0% { background: red;}
          25% { background: yellow;}
          50% { background: blue;}
          100% { background: black;}
        }

    </style>
  </head>
  <body>
    <div id="box"></div>
    <div class="gradual" id="gradual"></div>

  </body> 


 </html>


 


　　






 



 


 
以上是关于2016.2.20 css3 animation 的学习的主要内容，如果未能解决你的问题，请参考以下文章
 

 css3动画使用


 css3 动画库Animate.css使用


 css3系列之animation


 css3动画animate.css的使用


 css3 实现逐帧动画


 CSS3 animation 动画用法介绍