css3 眼珠旋转动画,CSS3小猫咪眼睛随鼠标移动动画特效

js代码

//获取cat所在div的位置

var catx=document.getElementsByClassName("cat")[0].offsetLeft;

var pL=document.getElementById("pL");

var pR=document.getElementById("pR");

var r=17;

document.οnmοusemοve=function(ev) {

var e = ev || event;

var m=[];

m.x=e.clientX-catx; //鼠标坐标能落在左边等位置

m.y=e.clientY-170; //head_content、head、eye离上方的距离，使鼠标能落在上方区域

var s=[];

s.x=pL.offsetLeft;

s.y=pL.offsetTop;

var mosx = Math.abs(m.x - s.x);

var mosy = Math.abs(m.y - s.y);

var angle = Math.atan(mosy / mosx);

var cx = 0, cy = 0;

if (m.x >= s.x && m.y <= s.y) {

cx = Math.cos(angle) * r;

cy = Math.sin(angle) * -r;

// console.log("右下");

}

if (m.x < s.x && m.y < s.y) {

cx = Math.cos(angle) * -r;

cy = Math.sin(angle) * -r;

// console.log("左下");

}

if (m.x < s.x && m.y > s.y) {

cx = Math.cos(angle) * -r;

cy = Math.sin(angle) * r;

// console.log("左上");

}

if (m.x > s.x && m.y > s.y) {

cx = Math.cos(angle) * r;

cy = Math.sin(angle) * r;

// console.log("右上");

}

if((m.x+catx)>=catx && (m.x+catx)<=(catx+345) && (m.y+170)>=100 && (m.y+170)<=360){

pL.style.top =15+'px';

pR.style.top =15+'px';

pL.style.left =18+'px';

pR.style.left =18+'px';

}else{

pL.style.top = 15+ cy + 'px';

pR.style.top = 15+ cy + 'px';

pL.style.left =17+cx + 'px';

pR.style.left =17+cx + 'px';

}

css3 眼珠旋转动画,CSS3小猫咪眼睛随鼠标移动动画特效相关推荐

html++鼠标跟随动画,5分钟实现Canvas鼠标跟随动画背景
关于Canvas制作炫酷背景,我会在git上不定时去更新,并会附上详细的解析,如果有喜欢的话,可以到git上瞧瞧前言相信很多前端小白都看过这样的背景动画,也好奇如何去实现这种效果!将这种效果应用到 ...
html飞机动画,html5 canvas纸飞机跟随鼠标飞行动画
这是一款效果很酷的html5 canvas纸飞机跟随鼠标飞行动画.插件中使用了paper.js来构建场景中的各种元素. HTML html结构只需要一个canvas,并给它一个id triangle- ...
眼睛随着鼠标转动方向
下载地址 JavaScript眼睛随着鼠标转动方向特效代码 dd:
用css3制作旋转加载动画的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 以WebKit为核心的浏览器,例如Safari和Chrome,对HTML5有着很好的支持,在移动平台中这两个浏览器对应的就是i ...
css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
html css动画自动旋转,使用CSS3 backface-visibility属性制作翻转动画效果
使用CSS3 backface-visibility属性我们可以制作出许多有趣的动画效果.当你翻转一个元素的时候,你看到的是什么?通常情况下,我们应该看到的是元素的背面,这是正常的情况,但是有时候我们 ...
css圆背景,css3圆形旋转背景动画特效
特效描述:css3 圆形旋转背景动画特效.css3 animation和transform属性制作圆形旋转背景动画. 代码结构 1. HTML代码 var followers = document. ...
css3绘制黑色可爱的小猫咪和爱心图形动画特效
这个是用css3绘制黑色可爱的小猫咪,如果喜欢的你们可以试一下哦~ html代码 <body> <div class="container"><div ...
CSS3，旋转rotate，动画animation
1.旋转rotate -- 可以让元素在2维平面顺时针或者逆时针旋转 1.语法:transform:rotate(度数) 2.重点:- 度数的单位是deg 举个例子:rotate(45deg)- 角度 ...
CSS3新特性——新增选择器，2D/3D转换，动画
CSS3新特性--新增选择器,2D/3D转换,动画欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页 ...

css3 眼珠旋转动画,CSS3小猫咪眼睛随鼠标移动动画特效

css3 眼珠旋转动画,CSS3小猫咪眼睛随鼠标移动动画特效相关推荐

最新文章

热门文章