[深圳|结业弟子]JS-包腾飞|2017年07月27日的日报-技能树.IT修真院

发表于： 2017-07-27 23:53:33

2 500

今天完成的事：

1、完成了任务8的三个页面，在一些地方还有一点小问题需要解决，预计明天可以提交任务。

2、给任务8中的职位列表页添加了动画渐显的效果，当指针放在div上时，原本隐藏的页面会慢慢显现出来。具体方法是，先给要显现的元素设置好样式，并设置opcity:0;transition:1s linear;其中，1s为渐显的时间，可以自己设置时间长短，linear为线性。之后设置hover的属性为opacity:1，这样，想要的效果就出现了。还有一种方式是用animation，即给hover设置animation:fadein 1s linear 1。

明天计划的事：

1、解决任务8剩下的问题，提交任务。

2、开始学习任务10的内容。

3、开始查看js语法，初步了解关于js的内容。

遇到的问题：

1、在设置导航栏的“首页”等几个按钮时，当页面缩小时，“首页”等几个题头自动消失，同时在右边出现一个按钮。点击按钮时“首页”等几个题头会重新以竖排的形式出现。但是排版却是乱的，怎么设置也无法在居中的位置。后来查看了一下官网的做法，发现是用的媒体查询。当我自己运用媒体查询后，我的问题也就解决了。

2、用transition的时候可以实现渐显效果，但是用animation做渐显效果的时候失败了。代码如下：

.card-animation{
    position:absolute;
    padding:.5rem .4rem .4rem .4rem;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.7);
    font-size:.16rem;
    color:white;
    opacity:0;
    /*transition:1s linear;*/
}
.card-animation:hover{
    opacity:1;
    -webkit-animation:fadein 1.5s linear 1;
    -moz-animation:fadein 1.5s linear 1;
    -o-animation:fadein 1.5s linear 1;
    -ms-animation:fadein 1.5s linear 1;
    animation:fadein 1.5s linear 1;
}