做过的动画记录

1.下拉查看：

下拉查看

html：

      <div class="mouse-div">

      <img class="mouse" src="img/mouse.png"/>

      </div>

css：

.mouse-div{

width: 100%;

height: 0.26rem;

text-align: center;

cursor: pointer;

position: absolute;

left: 0;

bottom: 1rem;

}

.mouse{

width: 0.27rem;

-webkit-transform: perspective(1px) translateZ(0);

transform: perspective(1px) translateZ(0);

box-shadow: 0 0 1px rgba(0, 0, 0, 0);

-webkit-animation-name: hvr-bob-float, hvr-bob;

animation-name: hvr-bob-float, hvr-bob;

-webkit-animation-duration: .1s, 1s;

animation-duration: .1s, 1s;

-webkit-animation-delay: 0s, 0s;

animation-delay: 0s, 0s;

-webkit-animation-timing-function: ease-out, ease-in-out;

animation-timing-function: ease-out, ease-in-out;

-webkit-animation-iteration-count: 1, infinite;

animation-iteration-count: 1, infinite;

-webkit-animation-fill-mode: forwards;

animation-fill-mode: forwards;

-webkit-animation-direction: normal, alternate;

animation-direction: normal, alternate;

}

@-webkit-keyframes hvr-bob {

0% {

-webkit-transform: translateY(0px);

transform: translateY(0px);

}

50% {

-webkit-transform: translateY(-10px);

transform: translateY(-10px);

}

100% {

-webkit-transform: translateY(0px);

transform: translateY(0px);

}

}

@keyframes hvr-bob {

0% {

-webkit-transform: translateY(0px);

transform: translateY(0px);

}

50% {

-webkit-transform: translateY(-10px);

transform: translateY(-10px);

}

100% {

-webkit-transform: translateY(0px);

transform: translateY(0px);

}

}

@-webkit-keyframes hvr-bob-float {

100% {

-webkit-transform: translateY(0px);

transform: translateY(0px);

}

}

@keyframes hvr-bob-float {

100% {

-webkit-transform: translateY(0px);

transform: translateY(0px);

}

}

---

2.鼠标滚动 导航显示与隐藏

windowAddMouseWheel();

function windowAddMouseWheel() {

var scrollFunc = function(e) {

e = e || window.event;

var Scrolltop = $(document).scrollTop();

console.log(Scrolltop)

if(e.wheelDelta) { 

if(Scrolltop == 900 || Scrolltop < 900) {

$('.nav').fadeOut()

}

if(Scrolltop > 900) {

$('.nav').fadeIn()

}

}

};

//给页面绑定滑轮滚动事件

if(document.addEventListener) {

document.addEventListener('DOMMouseScroll', scrollFunc, false);

}

//滚动滑轮触发scrollFunc方法

window.onmousewheel = document.onmousewheel = scrollFunc;

}

3.各种按钮的动画css效果参考

页面地址：http://www.youhutong.com/demo/00238yanshinfhmpwftcgnprsy/

hover css文件地址：http://www.youhutong.com/demo/00238yanshinfhmpwftcgnprsy/css/hover.css

使用时可以直接把css copy过来 比如：

.hvr-grow {

  display: inline-block;

  vertical-align: middle;

  -webkit-transform: translateZ(0);

  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  -moz-osx-font-smoothing: grayscale;

  -webkit-transition-duration: 0.3s;

  transition-duration: 0.3s;

  -webkit-transition-property: transform;

  transition-property: transform;

}

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {

  -webkit-transform: scale(1.1);

  transform: scale(1.1);

}