1. 技术文章
  2. css动画demo

css动画demo

由 a 夏天 提交于 2020-03-05 17:03:00 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>zepto实现手机端滚屏效果</title>
  <meta name="description" content="羊城杯活动">
  <meta name="keywords" content="羊城杯活动">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta content="telephone=no" name="format-detection">
  <script type="text/javascript" src="http://script2.pingan.com/app_js/wap/common/flexible.min.js"></script>
  <link rel="stylesheet" href="http://css2.pingan.com/app_css/wap/v20/wap_base.css" type="text/css">
  <link rel="stylesheet" type="text/css" href="css/animations.css">
</head>
<body>
<div id="page-content">
  <div class="page page-1 page-current">
    <div class="index-bg fadeIn ani-d1"></div>
    <div class="logo-wrap">
      <p class="logo slideInUpNone ani-d3">羊城杯logo淡出</p>
      <p class="title-bg slideInUpNone ani-d2">表白广州</p>
    </div>
  </div>
  <div class="page page-2 hide">
    <div class="logo-wrap">
      <i class="slideInUpNone ani-d1">春</i>
      <em class="slideInUpNone ani-d13">第五届羊城杯</em>
    </div>
    <div class="poetry-wrap clearfix">
       <div class="poetry-bg slideInUpNone ani-d2"></div> 
          <p class="slideInUpNone ani-d3">春喻甲方</p>
          <p class="slideInUpNone ani-d4 ">绿草的</p>
          <p class="slideInUpNone ani-d5">春喻甲方暗示 </p>
          <p class="slideInUpNone ani-d6">让我啊的附件</p>
          <p class="slideInUpNone ani-d7">春喻甲方暗示 </p>
          <p class="slideInUpNone ani-d8">让我啊的附件</p>
          <p class="slideInUpNone ani-d9">春喻甲方暗示 </p>
          <p class="slideInUpNone ani-d10">让我啊的附件</p>
          <p class="slideInUpNone ani-d11">广州</p>
          <p class="slideInUpNone ani-d12">在路上</p>
       </div>
    </div>
  </div>
  <div class="page page-3 hide"></div>
  <div class="page page-4 hide"></div>
</div>
<section class="arrow-up pt-page-moveIconUp"></section>
<script type="text/javascript" src="js/zepto.min.js"></script> 
<script type="text/javascript" src="js/touch.js"></script> 
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
*:not(input,textarea) {
  -webkit-touch-callout: inherit;
  -webkit-user-select: auto;
}
html,body {
  width: 100%;
  height: 100%;
}
a {
  color: #878787;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:hover {
  text-decoration: none;
}
i,em{
    font-style: normal;
}
button,input,select,textarea {
  font-size: 100%;
  margin: 0;
  padding: 0;
  outline: none;
}
dt,dd {
  display: inline-block;
}
textarea,input {
  resize: none;
  outline: none;
}
textarea {
  resize: none;
  -webkit-appearance: none;
}
ul,ol,li {
  list-style: none;
}
em {
  font-style: normal;
}
body{
    overflow:hidden;
}

.page{
    width:100%;
    height:100%;
    position:absolute;
    text-align:center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.page-current{z-index:1;}
.hide{ display:none;}

.page-1{ background-image: url(../images/1.png);}
.page-2{ background-image: url(../images/2.png);}
.page-3{ background-image: url(../images/3.png);}
.page-4{ background-image: url(../images/4.png);}

.arrow-up{
    height:auto;
    width: .2rem;
    position:absolute;
    left:50%;
    top:92%;
    margin-left:-.1rem;
    z-index:99;
}
.arrow-up:before{
    content: "";
    display: block;
    width: .2rem;
    height: .2rem;
    border-width: 1px 1px 0 0;
    border-color: #fff;
    border-style: solid;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.logo-wrap{
    margin: .3rem;
    text-align: left;
    position: relative;
}
.logo-wrap i{
    font-size: .5rem;
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}

.logo-wrap em{
    position: absolute;
    right: 0;
    height: .4rem;
    color: #fff;
}
.poetry-wrap{
    border:1px solid #fff;
    height: 3rem;
    padding: .3rem;
    position: relative;
    top: 2rem;
}
.poetry-bg{
    width: 100%;
    height: 100%;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.poetry-wrap p{
    color: #fff;
    padding-right: .1rem; 
    float: right;
    -webkit-writing-mode:vertical-rl;
    writing-mode:tb-rl;
    text-align: left;
    height: 100%;
    font-size: .26rem;
}
.poetry-wrap p:nth-child(2n){
    padding-left: .2rem;
}

.slideInUpNone{
    -webkit-animation: poetry-spring 0.5s ease-in-out;
    animation: poetry-spring 0.5s ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.ani-d1{
    -webkit-animation-delay: 0.2s;
}
.ani-d2{
    -webkit-animation-delay: 0.7s;
}
.ani-d3{
    -webkit-animation-delay: 1.2s;
}
.ani-d4{
    -webkit-animation-delay: 1.7s;
}
.ani-d5{
    -webkit-animation-delay: 2.2s;
}
.ani-d6{
    -webkit-animation-delay: 2.7s;
}
.ani-d7{
    -webkit-animation-delay: 3.2s;
}
.ani-d8{
    -webkit-animation-delay: 3.7s;
}
.ani-d9{
    -webkit-animation-delay: 4.2s;
}
.ani-d10{
    -webkit-animation-delay: 4.7s;
}
.ani-d11{
    -webkit-animation-delay: 5.2s;
}
.ani-d12{
    -webkit-animation-delay: 5.7s;
}
.ani-d13{
    -webkit-animation-delay: 6.2s;
}

@-webkit-keyframes poetry-spring {
    0% { 
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
        opacity: 0;
    }
    100% { 
     -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0,100%, 0);
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation: fadeIn 0.5s ease-in-out;
    animation: fadeIn 0.5s ease-in-out;
    /*-webkit-animation-fill-mode: both;
    animation-fill-mode: both;*/
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.index-bg{
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: lightblue;
}
.logo-wrap{
    position: absolute;
    left: 25%;
    top: .4rem;
}
.logo-wrap .title-bg{
    color: red;
    text-align: center;
    font-size: .3rem;
    font-weight: bold;
}
.logo-wrap .logo{
    color: #fff;
    text-align: center;
    font-size: .3rem;
    font-weight: bold;
}

/*  animate */
.pt-page-moveIconUp {
    -webkit-animation: moveIconUp 1.5s infinite ease-in-out;
    animation: moveToBottom 1.5s infinite ease-in-out;
}

@-webkit-keyframes moveIconUp {
    0% { -webkit-transform: translateY(100%); opacity:0;}
    50% { -webkit-transform: translateY(0%); opacity:1;}
    100% { -webkit-transform: translateY(-100%); opacity:0;}
}
@keyframes moveIconUp {
    0% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity:0;}
    50% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity:1;}
    100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity:0;}
}

.pt-page-moveToTop {
    -webkit-animation: moveToTop .6s ease both;
    animation: moveToTop .6s ease both;
}
@-webkit-keyframes moveToTop {
    from { }
    to { -webkit-transform: translateY(-100%); }
}
@keyframes moveToTop {
    from { }
    to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

.pt-page-moveFromBottom {
    -webkit-animation: moveFromBottom .6s ease both;
    animation: moveFromBottom .6s ease both;
}
@-webkit-keyframes moveFromBottom {
    from { -webkit-transform: translateY(100%); }
}
@keyframes moveFromBottom {
    from { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

.pt-page-moveToBottom {
    -webkit-animation: moveToBottom .6s ease both;
    animation: moveToBottom .6s ease both;
}
@-webkit-keyframes moveToBottom {
    from { }
    to { -webkit-transform: translateY(100%); }
}
@keyframes moveToBottom {
    from { }
    to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

.pt-page-moveFromTop {
    -webkit-animation: moveFromTop .6s ease both;
    animation: moveFromTop .6s ease both;
}

@-webkit-keyframes moveFromTop {
    from { -webkit-transform: translateY(-100%); }
}
@keyframes moveFromTop {
    from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}
(function(){

//配置
var config = {
    'audio':{
        'icon':'audio-record-play',
        'text':true
    },
    'loading': 'loading-ic'
};

//loading
window.onload = function(){
    $('#loading').hide();
}

//分享
$('#js-btn-share').bind('tap',function(){
    $('#js-share').show();
})
$('#js-share').bind('tap',function(){
    $(this).hide();
});


var pageIndex = 1,
    pageTotal = $('.page').length,
    towards = { up:1, right:2, down:3, left:4},
    isAnimating = false;

//禁用手机默认的触屏滚动行为
document.addEventListener('touchmove',function(event){
    event.preventDefault(); },false);

$(document).swipeUp(function(){
    if (isAnimating) return;
    if (pageIndex < pageTotal) { 
        pageIndex+=1; 
    }else{
        pageIndex=1;
    };
    pageMove(towards.up);
})

$(document).swipeDown(function(){
    if (isAnimating) return;
    if (pageIndex > 1) { 
        pageIndex-=1; 
    }else{
        pageIndex=pageTotal;
    };
    pageMove(towards.down);    
})

function pageMove(tw){
    var lastPage;
    if(tw=='1'){
        if(pageIndex==1){
            lastPage = ".page-"+pageTotal;
        }else{
            lastPage = ".page-"+(pageIndex-1);
        }
        
    }else if(tw=='3'){
        if(pageIndex==pageTotal){
            lastPage = ".page-1";
        }else{
            lastPage = ".page-"+(pageIndex+1);
        }
        
    }

    var nowPage = ".page-"+pageIndex;
    
    switch(tw) {
        case towards.up:
            outClass = 'pt-page-moveToTop';
            inClass = 'pt-page-moveFromBottom';
            break;
        case towards.down:
            outClass = 'pt-page-moveToBottom';
            inClass = 'pt-page-moveFromTop';
            break;
    }
    isAnimating = true;
    $(nowPage).removeClass("hide");
    
    $(lastPage).addClass(outClass);
    $(nowPage).addClass(inClass);
    
    setTimeout(function(){
        $(lastPage).removeClass('page-current');
        $(lastPage).removeClass(outClass);
        $(lastPage).addClass("hide");
        $(lastPage).find("img").addClass("hide");
        
        $(nowPage).addClass('page-current');
        $(nowPage).removeClass(inClass);
        $(nowPage).find("img").removeClass("hide");
        
        isAnimating = false;
    },600);
}

})();

touch.js

//     Zepto.js
//     (c) 2010-2014 Thomas Fuchs
//     Zepto.js may be freely distributed under the MIT license.

;(function($){
  var touch = {},
    touchTimeout, tapTimeout, swipeTimeout, longTapTimeout,
    longTapDelay = 750,
    gesture

  function swipeDirection(x1, x2, y1, y2) {
    return Math.abs(x1 - x2) >=
      Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
  }

  function longTap() {
    longTapTimeout = null
    if (touch.last) {
      touch.el.trigger('longTap')
      touch = {}
    }
  }

  function cancelLongTap() {
    if (longTapTimeout) clearTimeout(longTapTimeout)
    longTapTimeout = null
  }

  function cancelAll() {
    if (touchTimeout) clearTimeout(touchTimeout)
    if (tapTimeout) clearTimeout(tapTimeout)
    if (swipeTimeout) clearTimeout(swipeTimeout)
    if (longTapTimeout) clearTimeout(longTapTimeout)
    touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null
    touch = {}
  }

  function isPrimaryTouch(event){
    return (event.pointerType == 'touch' ||
      event.pointerType == event.MSPOINTER_TYPE_TOUCH)
      && event.isPrimary
  }

  function isPointerEventType(e, type){
    return (e.type == 'pointer'+type ||
      e.type.toLowerCase() == 'mspointer'+type)
  }

  $(document).ready(function(){
    var now, delta, deltaX = 0, deltaY = 0, firstTouch, _isPointerType

    if ('MSGesture' in window) {
      gesture = new MSGesture()
      gesture.target = document.body
    }

    $(document)
      .bind('MSGestureEnd', function(e){
        var swipeDirectionFromVelocity =
          e.velocityX > 1 ? 'Right' : e.velocityX < -1 ? 'Left' : e.velocityY > 1 ? 'Down' : e.velocityY < -1 ? 'Up' : null;
        if (swipeDirectionFromVelocity) {
          touch.el.trigger('swipe')
          touch.el.trigger('swipe'+ swipeDirectionFromVelocity)
        }
      })
      .on('touchstart MSPointerDown pointerdown', function(e){
        if((_isPointerType = isPointerEventType(e, 'down')) &&
          !isPrimaryTouch(e)) return
        firstTouch = _isPointerType ? e : e.touches[0]
        if (e.touches && e.touches.length === 1 && touch.x2) {
          // Clear out touch movement data if we have it sticking around
          // This can occur if touchcancel doesn't fire due to preventDefault, etc.
          touch.x2 = undefined
          touch.y2 = undefined
        }
        now = Date.now()
        delta = now - (touch.last || now)
        touch.el = $('tagName' in firstTouch.target ?
          firstTouch.target : firstTouch.target.parentNode)
        touchTimeout && clearTimeout(touchTimeout)
        touch.x1 = firstTouch.pageX
        touch.y1 = firstTouch.pageY
        if (delta > 0 && delta <= 250) touch.isDoubleTap = true
        touch.last = now
        longTapTimeout = setTimeout(longTap, longTapDelay)
        // adds the current touch contact for IE gesture recognition
        if (gesture && _isPointerType) gesture.addPointer(e.pointerId);
      })
      .on('touchmove MSPointerMove pointermove', function(e){
        if((_isPointerType = isPointerEventType(e, 'move')) &&
          !isPrimaryTouch(e)) return
        firstTouch = _isPointerType ? e : e.touches[0]
        cancelLongTap()
        touch.x2 = firstTouch.pageX
        touch.y2 = firstTouch.pageY

        deltaX += Math.abs(touch.x1 - touch.x2)
        deltaY += Math.abs(touch.y1 - touch.y2)
      })
      .on('touchend MSPointerUp pointerup', function(e){
        if((_isPointerType = isPointerEventType(e, 'up')) &&
          !isPrimaryTouch(e)) return
        cancelLongTap()

        // swipe
        if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||
            (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30))

          swipeTimeout = setTimeout(function() {
            touch.el.trigger('swipe')
            touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
            touch = {}
          }, 0)

        // normal tap
        else if ('last' in touch)
          // don't fire tap when delta position changed by more than 30 pixels,
          // for instance when moving to a point and back to origin
          if (deltaX < 30 && deltaY < 30) {
            // delay by one tick so we can cancel the 'tap' event if 'scroll' fires
            // ('tap' fires before 'scroll')
            tapTimeout = setTimeout(function() {

              // trigger universal 'tap' with the option to cancelTouch()
              // (cancelTouch cancels processing of single vs double taps for faster 'tap' response)
              var event = $.Event('tap')
              event.cancelTouch = cancelAll
              touch.el.trigger(event)

              // trigger double tap immediately
              if (touch.isDoubleTap) {
                if (touch.el) touch.el.trigger('doubleTap')
                touch = {}
              }

              // trigger single tap after 250ms of inactivity
              else {
                touchTimeout = setTimeout(function(){
                  touchTimeout = null
                  if (touch.el) touch.el.trigger('singleTap')
                  touch = {}
                }, 250)
              }
            }, 0)
          } else {
            touch = {}
          }
          deltaX = deltaY = 0

      })
      // when the browser window loses focus,
      // for example when a modal dialog is shown,
      // cancel all ongoing events
      .on('touchcancel MSPointerCancel pointercancel', cancelAll)

    // scrolling the window indicates intention of the user
    // to scroll, not tap or swipe, so cancel all ongoing events
    $(window).on('scroll', cancelAll)
  })

  ;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown',
    'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(eventName){
    $.fn[eventName] = function(callback){ return this.on(eventName, callback) }
  })
})(Zepto)

 

标签
transform
tap
position
webkit
css
css动画
animation
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!