发表于: 2019-06-30 23:50:24
1 793
今天完成的事情:做完了任务8/9、做了一个简单的动画悬停。
明天计划的事情:完成任务8/9的深度思考、任务8/9知识点沉淀吸收
遇到的问题:做动画悬停
做动画悬停浪费了好长时间,最开始是用
div{ width:0px; }
div:hove{ width:100%;transition: width 2s;}
发现出来的东西和预期不符,文字被挤压的一点一点出来,
最后用
div{
position:absolute;
top:0;
left:-100%
visibility: hidden;
}
div:hove{
visibility: visible;
transform: translate3d(100%, 0px, 0px);
transition: transform .3s linear 0s;
}
实现
收获:学会了怎样做简单的动画,对布局更加熟练
评论