html鼠标悬停出现菜单,css鼠标经过弹出子菜单特效

Hello React!

::-webkit-scrollbar{ display:none; }

::-webkit-input-placeholder {

font-size: 20px;

}

li , span , img{

list-style-type:none;

cursor:pointer;

}

html,body,#app{

margin: 0;

padding: 0;

height: 100%;

-webkit-overflow-scrolling: touch;

}

#circle:before{

content:'';

display:block;

border-radius: 50%;

transition: .5s ;

}

#circle:hover:before{

width: 50px;

height: 50px;

border:1px solid;

transform:translate(-100px,70px);

box-shadow: 0 0 0 10px gray;

}

#circle:after{

content:'';

display:block;

border-radius: 50%;

transition: .5s ;

}

#circle:hover:after{

width: 50px;

height: 50px;

border:1px solid;

transform:translate(100px,16px);

}

#circle ~ div{

transform:translateY(50px);

}

#circle:hover ~ div{

width: 50px;

height: 50px;

border:1px solid;

border-radius: 50%;

transform:translateY(70px);

transition: transform .5s ;

}

#circle ~div:before{

content:'';

display:block;

border-radius: 50%;

transition: .5s .5s ;

}

#circle:hover ~ div:before{

width: 50px;

height: 50px;

border:1px solid;

transform:translateY(70px);

}

const l=console.log

var Flex=(flex,props)=>

{props.data ? props.data.map(d=>{d}) : props.children}

class Index extends React.Component{

state={

}

render() {

return (

)

}

}

ReactDOM.render(

,

document.getElementById('app')

)