研发部第二次任务心得

最新推荐文章于 2024-08-26 19:16:26 发布

置顶新参者-tangent

最新推荐文章于 2024-08-26 19:16:26 发布

阅读量150

点赞数 2

分类专栏：云麓谷研发部文章标签： css html5 html css3

本文链接：https://blog.csdn.net/weixin_51877075/article/details/109428349

版权

云麓谷研发部专栏收录该内容

5 篇文章 2 订阅

订阅专栏

研发部第二次任务心得

第二次任务相比第一次明显难度大了很多，就我个人来看，有如下几个难点：

页头的轮播图片
通过我个人查找的资料来看，这个形态最好用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%，图片的大小会根据页面一起缩放，但图标的大小并为随之改变，就产生了非常不协调的样式。
如果有谁知道怎么解决，还请不吝赐教，教教小萌新。

新参者-tangent

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
研发部第二次任务心得

研发部第二次任务心得第二次任务相比第一次明显难度大了很多，就我个人来看，有如下几个难点：页头的轮播图片通过我个人查找的资料来看，这个形态最好用JavaScript来实现，但我也不会JavaScript呀，所以我们就选择放弃这个鬼畜的任务换用CSS来实现。当然啦，CSS实现的效果估计没有JavaScript那么好，而且就我掌握的情况来看，在CSS中自动轮播和手动轮播很难同时一起实现。话不多说，直接来链接和代码：如何用纯css3实现轮播图CSS3 @keyframes 规则HTML代码：
复制链接

扫一扫

专栏目录