扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
新建html复制黏贴运行即可
创新互联建站作为成都网站建设公司，专注网站建设公司、网站设计，有关成都定制网页设计方案、改版、费用等问题，行业涉及塔吊租赁等多个领域，已为上千家企业服务，得到了客户的尊重与认可。
html
head
title鼠标跟随效果/title
style type="text/css"
html {
overflow: hidden;
}
body {
position: absolute;
height: 100%;
width: 100%;
margin:0;
padding:0;
}
#screen {
background:#000;
position: absolute;
width: 100%;
height: 100%;
}
#screen span {
background: #fff;
font-size: 0;
overflow: hidden;
width: 2px;
height: 2px;
}
/style
script type="text/javascript"
var Follow = function () {
var $ = function (i) {return document.getElementById(i)},
addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},
OBJ = [], sp, rs, N = 0, m;
var init = function (id, config) {
this.config = config || {};
this.obj = $(id);
sp = this.config.speed || 4;
rs = this.config.animR || 1;
m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5};
this.setXY();
this.start();
}
init.prototype = {
setXY : function () {
var _this = this;
addEvent(this.obj, 'mousemove', function (e) {
e = e || window.event;
m.x = e.clientX;
m.y = e.clientY;
})
},
start : function () {
var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn;
OBJ[N++] = OO = new CObj(null, 0, 0);
for(var i=0;i360;i+=20){
var O = OO;
for(var j=10; j35; j+=1){
var x = fn(i, j).x,
y = fn(i, j).y;
OBJ[N++] = o = new CObj(O , x, y);
O = o;
}
}
setInterval(function() {
for (var i = 0; i N; i++) OBJ[i].run();
}, 16);
}
}
var CObj = function (p, cx, cy) {
var obj = document.createElement("span");
this.css = obj.style;
this.css.position = "absolute";
this.css.left = "-1000px";
this.css.zIndex = 1000 - N;
document.getElementById("screen").appendChild(obj);
this.ddx = 0;
this.ddy = 0;
this.PX = 0;
this.PY = 0;
this.x = 0;
this.y = 0;
this.x0 = 0;
this.y0 = 0;
this.cx = cx;
this.cy = cy;
this.parent = p;
}
CObj.prototype.run = function () {
if (!this.parent) {
this.x0 = m.x;
this.y0 = m.y;
} else {
this.x0 = this.parent.x;
this.y0 = this.parent.y;
}
this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp;
this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp;
this.css.left = Math.round(this.x) + 'px';
this.css.top = Math.round(this.y) + 'px';
}
return init;
}();
/script/head
body
div id="screen"/div
script type="text/javascript"
new Follow('screen', {speed: 4,
animR : 2,
fn : function (i, j) {
return {
x : j/4*Math.cos(i),
y : j/4*Math.sin(i)
}
}})
/script/body
/html
你好，
可以通过判断小球边缘和窗口高度来实现
例如垂直下落，给小球y方向的初速度和加速度（模拟重力加速度），当小球的小边缘接触窗口底部时，将 y = -y；加速度不反向；当达到最高点及y方向速度为零，将y再反向向下落。
来回弹动关键在于 对边缘的判断，和速度方向的判断和计算
操场轨迹上下两边为直线，左右为半圆。
选择用纯css分成四段控制动画，最终效果如图：
详细分析：
创建HTML：
HTML非常简单，2个div嵌套，里面的point就是点，调整外面的layout的top，left和rotate做出动画效果。
div class="layout"
div class="point"/div
/div
核心css：
去掉了浏览器兼容用的代码。
把动画分成四个部分：上方直线-右边半圆-下方直线-左边半圆。
最巧妙的地方在于，layout其实是一个长方型，把点放在长方型的一头，通过旋转layout使点旋转，去掉代码中注释的红色背景就能看到如下效果：
.layout{
width:10px;
height:150px;
position:relative;
margin-left:100px;
margin-top:50px;
/*background:red;*/
animation-name:rotate;
animation-duration:2s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
animation-direction:normal;
}
@-webkit-keyframes rotate{
0% { left:0px; top:0px;
transform:rotate(0deg);
}
25% { left:150px; top:0px;
transform:rotate(0deg);
}
50% { left:150px; top:50px;
transform:rotate(180deg);
}
75% { left:0px; top:50px;
transform:rotate(180deg);
}
100%{ left:0px; top:0px;
transform:rotate(360deg);
}
}
完整代码:
html
head
style
.point{
width:10px;
height:10px;
background:blue;
position:relative;
border-radius:5px;
margin:0 auto;
}
.layout{
width:10px;
height:150px;
position:relative;
margin-left:100px;
margin-top:50px;
/*background:red;*/
animation-name:rotate;
animation-duration:2s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
animation-direction:normal;
/* Chrome: */
-webkit-animation-name:rotate;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-play-state:running;
-webkit-animation-direction:normal;
/* Firefox: */
-moz-animation-name:rotate;
-moz-animation-duration:2s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
-moz-animation-direction:normal;
/* Opera: */
-o-animation-name:rotate;
-o-animation-duration:2s;
-o-animation-timing-function:linear;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
-o-animation-direction:normal;
}
@-webkit-keyframes rotate{
0% { left:0px; top:0px;
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Chrome */
-o-transform:rotate(0deg); /* Opera */
}
25% { left:150px; top:0px;
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Chrome */
-o-transform:rotate(0deg); /* Opera */
}
50% { left:150px; top:50px;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Chrome */
-o-transform:rotate(180deg); /* Opera */
}
75% { left:0px; top:50px;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Chrome */
-o-transform:rotate(180deg); /* Opera */
}
100%{ left:0px; top:0px;
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Chrome */
-o-transform:rotate(360deg); /* Opera */
}
}
/style
/head
body
div class="layout"
div class="point"/div
/div
/body
/html
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网