研发部第二次任务心得
第二次任务相比第一次明显难度大了很多,就我个人来看,有如下几个难点:
- 页头的轮播图片
通过我个人查找的资料来看,这个形态最好用JavaScript来实现,但我也不会JavaScript呀,所以我们就选择放弃这个鬼畜的任务换用CSS来实现。
当然啦,CSS实现的效果估计没有JavaScript那么好,而且就我掌握的情况来看,在CSS中自动轮播和手动轮播很难同时一起实现。
话不多说,直接来链接和代码:
如何用纯css3实现轮播图
CSS3 @keyframes 规则
HTML代码:
<div class="wrap">
<img src="../image/top1.png" alt="200">
<img src="../image/top2.png" alt="300"> <!--页头轮播图片-->
</div>
CSS代码:
.wrap {/* 页头轮播图片 */
position: relative;
width: 200vw;
overflow: hidden;
animation:mymove 8s infinite ;
-webkit-animation:mymove 8s infinite;
}
.wrap img {/* 页头轮播图片 */
display: inline-block;
width: 50%;
height: auto;
float: left;
}
@keyframes mymove {/* 页头轮播图片 */
0% {
left: 0vw;
}
25% {
left: 0vw;
}
50% {
left: -100vw;
}
75% {
left: -100vw;
}
100%{
left: 0vw;
}
}
@-webkit-keyframes mymove {/* 页头轮播图片 */
0% {
left: 0vw;
}
25% {
left: 0vw;
}
50% {
left: -100vw;
}
75% {
left: -100vw;
}
100%{
left: 0vw;
}
}
- 代码量有点大,整个页面很长,写这么长的页面可能需要800-1000行代码才能写出nice的感觉。
- 对于hover的使用同样是难点,这里简单介绍一下使用到的hover类型:
- 第一是文字hover,可以改变超链接(包括页面内跳转和页面外链接)的样式【当光标悬停在上面时】值得一提的是,这种样式通常还有几个好伙伴:
link,visited,active.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p>
<p><b>注意:</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>
具体内容见菜鸟驿站:链接样式
- 第二就是图片或者整个盒子的悬停样式,这种样式并不和超链接同时存在,而且需求也不相同。
那么这种样式应该怎么做呢?一开始我是一头雾水的,然后我借鉴了何玮琪同学的做法,她是这么做的:
.special {
display: none;
}
.gallery-box:hover .special1 {
display: flex;
align-items: center;
justify-content: center;
width: 286px;
height: 40px;
background-color: rgba(255, 83, 52, 0.89);
color: white;
transform: translateY(-94px);
}
不难发现,她是先让这个盒子不存在,然后用hover使这个盒子出现的。
但是,这也会导致一个非常不nice的问题:在开始的时候,盒子不存在,也是不占空间的,但hover之后盒子出现,开始占用空间了,这就会产生类似页面颤抖的感觉。
我在她的基础上提出的修正办法是,并不使用display: none的用法,而是在一开始把盒子变得透明,让盒子本身占有空间,然后的hover样式只是让本来就存在的盒子现形即可。
下面是我的代码:
.detail {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
background-color: rgba(211, 79, 56, 0.85);
color: white;
transform: translateY(-94px);
opacity: 0
}
.gallery-box:hover .detail {
opacity: 1
}
我是使用了 opacity这个方式,然后取了0和1这两个极端值,大家也可以使用visibility和hidden的指令达到相同的效果。
4. 对flex布局的更深理解
对于本次任务,我仍然是flex和盒子模型打天下的方法解决的【除了轮播用了float,一些hover样式用了transform】对于父级和子级关系有了更深的理解。
本次任务中我还没解决的问题:
找不到一种可以与flex兼容的优秀的部分定位方式。
不难发现,缩放页面之后,90%的图标的相对位置发生了明显的改变,同时,因为使用的flex布局的同时用了width=100%,图片的大小会根据页面一起缩放,但图标的大小并为随之改变,就产生了非常不协调的样式。
如果有谁知道怎么解决,还请不吝赐教,教教小萌新。