直观：纯js随鼠标位置，移动速度而变化，图片放大和缩小以显示特殊效果

这是一个使用纯js制作的超酷移动速度图片，随着鼠标位置的变化而变化，以放大和缩小以显示特殊效果。整个js代码简短明了，超过100行代码完成了惊人的效果。

HTML

html结构非常简单：

    

    
Loading...
    



    
    
    
    
    

                

CSS

css代码如下，只是简单地放置一些元素并给出宽度和高度：

html {overflow: hidden;}
body {
    background-image:-webkit-radial-gradient(circle at top right,#5596BC,#75BEC7);
    background-image:-moz-radial-gradient(circle at top right,#5596BC,#75BEC7);
    background-image:-o-radial-gradient(circle at top right,#5596BC,#75BEC7);
    background-image:-ms-radial-gradient(circle at top right,#5596BC,#75BEC7);
    background-image:radial-gradient(circle at top right,#5596BC,#75BEC7);
    width: 100%;
    height: 100%;
    cursor: crosshair;
}
.spanSlide {
    position: absolute;
    background: #000;
    font-size: 1px;
    overflow: hidden;
}
.imgSlide {
    position: absolute;
    left: 5%;
    top: 5%;
    width: 90%;
    height: 90%;
    overflow: hidden;
}
.txtSlide {
    position: absolute;
    top: 5%;
    left: 50px;
    width:100%;
    color:#FFF;
    font-family: arial, helvetica, verdana, sans-serif;
    font-weight: bold;
    font-size:96px;
    letter-spacing:12px;
    filter: alpha(opacity=70);
    -moz-opacity:0.7;
    opacity:0.7;
}
                

JAVASCRIPT

所有js代码仅是以下73行代码：

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-318781-1.html