当鼠标悬浮到灰色区域时，绿色区域跟随鼠标
image.png
image.png
image.png
React
import React,{Component} from 'react';
import styles from './style.scss';
class MouseFallow extends Component{
constructor(props){
super(props);
this.state={
xPos:'0px',
yPos:'0px'
}
}
handleMouseOver=(e)=>{
const child=e.currentTarget.firstElementChild;
const childPos=child.getBoundingClientRect();
const x=e.pageX-(childPos.left+child.offsetWidth/2);
const y=e.pageY-(childPos.top+child.offsetHeight/2);
this.setState({
xPos:x+'px',
yPos:y+'px'
});
}
handleMouseOut=()=>{
this.setState({
xPos:0+'px',
yPos:0+'px'
});
}
render(){
const {xPos,yPos}=this.state;
const moveStyle={
transform:`translate(${xPos},${yPos})`
};
return (
<div
className={styles.external}
onMouseMove={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
>
<div className={styles.internal} style={moveStyle}>
</div>
</div>
);
}
}
export default MouseFallow;
css
.external{
width: 80px;
height: 80px;
border-radius: 40px;
background: #555;
padding: 16px;
cursor: pointer;
}
.internal{
width: 48px;
height: 48px;
border-radius: 24px;
background: #563;
transition:0.3s transform cubic-bezier(0.2, 0.0, 0.2, 1);
}
.external:hover{
.internal{
border:1px solid rgba(255,255,255,1)
}
}
