zoukankan      html  css  js  c++  java
  • 各种动效收集

    一、<a>标签锚点点击滑动到对应位置(基于jq)

    $('a[href*=#],area[href*=#]').click(function() {  
            console.log(this.pathname)  
            if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {  
                var $target = $(this.hash);  
                $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');  
                if ($target.length) {  
                    var targetOffset = $target.offset().top-50;  
                    $('html,body').animate({  
                                scrollTop: targetOffset  
                            },  
                            1000);  
                    return false;  
                }  
            }  
        }); 

    二、图片呼吸动态效果(CSS3)

    定义效果:

    @mixin animation( $name, $duration, $timing, $delay, $count ) {
    animation-name: $name;
    animation-duration: $duration;
    animation-timing-function: $timing;
    animation-delay: $delay;
    animation-iteration-count: $count;
    -webkit-animation-name: $name;
    -webkit-animation-duration: $duration;
    -webkit-animation-timing-function: $timing;
    -webkit-animation-delay: $delay;
    -webkit-animation-iteration-count: $count;
    }
    
    @keyframes breath {
    0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    }
    50% {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    }
    100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    }
    }
    
    @-webkit-keyframes breath {
    0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    }
    50% {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    }
    100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    }
    }

    在需要该效果的地方引用该CSS

              img{
                width: 100%;
                @include animation(breath, 2s, linear, 0s, infinite);
              }
  • 相关阅读:
    类中以双下划线開始的方法
    Dynamics CRM2016 新功能之从CRM APP中导出数据至EXCEL
    敏捷项目管理实践
    Hibernate环境搭建
    ubuntu12.04更新软件源时出现校验和不符
    修炼你自己
    http自己定义超时检測方法、主动抛出异常
    sql server 2008安装图解
    Ural 1353 Milliard Vasya&#39;s Function(DP)
    待字闺中之构造最大数分析
  • 原文地址:https://www.cnblogs.com/zhengweijie/p/7111882.html
Copyright © 2011-2022 走看看