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.鼠標(biāo)滾動(dòng) 導(dǎo)航顯示與隱藏
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()
}
}
};
//給頁面綁定滑輪滾動(dòng)事件
if(document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滾動(dòng)滑輪觸發(fā)scrollFunc方法
window.onmousewheel = document.onmousewheel = scrollFunc;
}
3.各種按鈕的動(dòng)畫css效果參考
頁面地址：http://www.youhutong.com/demo/00238yanshinfhmpwftcgnprsy/
hover css文件地址：http://www.youhutong.com/demo/00238yanshinfhmpwftcgnprsy/css/hover.css
使用時(shí)可以直接把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);
}
