2016.2.20 css3 animation 的学习

时间：2016-02-20 17:25:48 阅读：159 评论：0 收藏：0 [点我收藏+]

标签：



















 
















使用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 的学习

标签：

原文地址：http://www.cnblogs.com/xyxiao001/p/5203554.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行