百度云盘 传送门 密码 :4n9u
火狐浏览器上纯CSS_动画效果鼠标跟随效果：
(作者：lily_lcj 传送门)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动画效果鼠标跟随</title> <link rel="stylesheet" href="css/public.css" /> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="scripts/respond.js"></script><!-- IE下兼容@media screen --> <script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="scripts/sketch.min.js"></script> </head> <body> <p>Gary</p> <!-- 鼠标跟随DIV --> <div id="test" style="position:fixed;top:0px;z-index:20;"></div> <script language="JavaScript"> function getOs(){ var OsObject = ""; if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE"; } if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ $.getScript('scripts/mousefollow.js'); return "Firefox"; } if(isSafari=navigator.userAgent.indexOf("Safari")>0) { $.getScript('scripts/mousefollow.js'); return "Safari"; } if(isCamino=navigator.userAgent.indexOf("Camino")>0){ $.getScript('scripts/mousefollow.js'); return "Camino"; } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ $.getScript('scripts/mousefollow.js'); return "Gecko"; } } getOs(); </script> </body> </html>
@charset "utf-8";
/* CSS Document */
/*==============================
CSS RESET
================================= */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
margin: 0;
padding: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
font-family:"Microsoft YaHei","SimHei";
font-size:12px;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hide from IE Mac */
.clearfix{
display: block;
}
/* End hide from IE Mac */
.none {
display: none;
}
a{text-decoration:none;}
input{ -webkit-box-sizing:border-box;
-webkit-appearance: none;
}
/* End Clearfix */
@charset "utf-8";
/* CSS Document */
body{background:#222;}
.border_left_none{border-left:0px!important;}
#index_top img{
float:left;
height:15px;
margin-top:10px;
/*border-top:1px solid yellow;
border-bottom:1px solid yellow;*/
padding:5px;
margin-right:20px;
}
#index_top p{
color:#fff;
line-height:15px;
margin-top:15px;
float:left;
font-size:14px;
font-weight:700;
padding-left:20px;
padding-right:20px;
border-left:1px solid #fff;
}
@media screen and (min- 1200px){
.top_wrap{
1180px;
height:45px;
margin:0 auto;
}
}
@media screen and (min- 960px) and (max- 1199px){
.top_wrap{
960px;
height:45px;
margin:0 auto;
}
}
p {
position: fixed;
top: 50%;
left: 0;
right: 0;
text-align: center;
transform: translateY(-50%);
font-size: 40px;
font-weight: 900;
color: white;
text-shadow: 0 0 50px black;
text-transform: capitalize;
font-family: 'Roboto','Helvetica','Arial',sans-serif;
letter-spacing: 5px;
}
实现效果
getOs()获取浏览器种类，绑定js
<script language="JavaScript"> function getOs(){ var OsObject = ""; if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE"; } if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ $.getScript('scripts/mousefollow.js'); return "Firefox"; } if(isSafari=navigator.userAgent.indexOf("Safari")>0) { $.getScript('scripts/mousefollow.js'); return "Safari"; } if(isCamino=navigator.userAgent.indexOf("Camino")>0){ $.getScript('scripts/mousefollow.js'); return "Camino"; } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ $.getScript('scripts/mousefollow.js'); return "Gecko"; } } getOs(); </script>
window.navigator.userAgent.indexOf（）获取浏览器类型和版本号的
支持：MSIE、Firefox、Safari、Camino、Gecko类型浏览器
以后等我厉害了一定要弄个兼容全部浏览器的O(∩_∩)O~