文武科技柜 / 教程系列 / CSS 学习记录02：菜单悬浮、全屏Banner、幻灯片

CSS 学习记录02：菜单悬浮、全屏Banner、幻灯片

斌仔

教程系列

文章字数 642 字阅读时间 21 分钟

文章目录

菜单悬浮效果
- html文件
- Css文件
全屏banner
幻灯片
总结

🤖 由 ChatGPT 生成的文章摘要

此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结

已经离上次 CSS 学习记录 01：链接背景悬浮效果过去3天了，这三天除了上班，就趁晚上休息时间，学习前端知识，并撸了几个小项目拿来练练手。

菜单悬浮效果

效果预览

html文件

<!-- 先编写大概布局 -->
<div class="top">
  <ul class="father">
  <li>父菜单一
    <ul class="son">
      <li>子菜单1</li>
      <li>子菜单2</li>
      <li>子菜单3</li>
    </ul>
  </li>
  <li>父菜单二
  <ul class="son">
      <li>子菜单1</li>
    </ul>
  </li>
  <li>父菜单三
  <ul class="son">
      <li>子菜单1</li>
      <li>子菜单2</li>    
    </ul></li>
</ul>
</div>
<div class="content">
  <p>
    刚开始学习前端时，一定要以培养兴趣、快速入门为目标。我入门前端时，由于没有基础、啥都不懂，因此选择在线实战教程网站来学习，跟着教程案例一行行把代码敲下来，实时浏览显示效果，很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时，我对看过的知识点没有什么印象，基本是看了就忘，当我想要自己写一个网站，也根本无从下手。
  </p>
</div>

Css文件

/*
   1. 页面初始化
*/
*{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}
/*
   2. 设置顶部栏宽高
*/
.top{
  width: 80%;
  height: 10%;
  margin: 0 auto;
  border: 1px solid #000;
  border-radius: 5px;
}
/*
  3. 设置父菜单的布局样式
*/
.father{
  text-align: center;
  /*
  详细可见：
  1. https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
  2. https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
  */
  display: flex;
  justify-content: center;
  position: relative;
}

.father>li{
  padding: 20px 6px;
  position: relative;
}

.father>li:hover{
 color: #fff; 
}

/*
  6. 设计父菜单悬浮背景效果
*/
.father>li::before,.son>li::before{
  content: "";
  background-color: rgb(255, 118, 152);
  position: absolute;
  top: 25%;
  left: 0;
  height: 50%;
  width: 100%;
  z-index: -1;
  border: 1px solid #000;
  border-radius: 5px;
  opacity: 0;
  transform: scaleX(0.3);
  transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.father>li:hover::before,.son>li:hover::before{
  transform: none;
  opacity: 1;
}

.father>li:hover .son{
  opacity: 1;
}


/*
  4. 设置子菜单的布局样式
*/
.son{
  background-color: #f7f9fe;
  color: #000;
  min-width: 100px;
  text-align: left;
  border: 1px solid #000;
  border-radius: 5px;
  position: absolute;
  top: 45px;
  text-align: center;
  margin: 0 0 0 -25px;
  padding: 10px 6px;
  /*
  opacity：元素的不透明度
  详细可见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/opacity
  */
  opacity: 0;
  /*
  translateY() 在页面垂直移动元素
  */
  transform: translateY(5px);
  transition: all .6s cubic-bezier(.4,.01,.165,.99);
}
.son>li{
  padding: 6px;
  position: relative;
}

.son>li::before{
  height: 60%;
  top: 20%;
}

.content{
  width: 80%;
  height: auto;
  margin: 0 auto;
}

全屏banner

效果预览

html文件

<body>
  <div class="page" id="page">
    <div class="info" id="info">
      <p>彼岸花花开彼岸，断肠草草断肝肠。</p>
      <p>文武科技柜</p>
    </div>
    <div class="scroll-down scroll-down-effects" id="scrollDown">
      ↓
    </div>
  </div>
  <div class="content" id="content-inner">
    <p>刚开始学习前端时，一定要以培养兴趣、快速入门为目标。我入门前端时，由于没有基础、啥都不懂，因此选择在线实战教程网站来学习，跟着教程案例一行行把代码敲下来，实时浏览显示效果，很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时，我对看过的知识点没有什么印象，基本是看了就忘，当我想要自己写一个网站，也根本无从下手。</p>
    <p>刚开始学习前端时，一定要以培养兴趣、快速入门为目标。我入门前端时，由于没有基础、啥都不懂，因此选择在线实战教程网站来学习，跟着教程案例一行行把代码敲下来，实时浏览显示效果，很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时，我对看过的知识点没有什么印象，基本是看了就忘，当我想要自己写一个网站，也根本无从下手。</p>
  </div>
</body>

Css文件

* {
  padding: 0;
  margin: 0;
}
/*
必须设置页面html,body 100%，否则页面内容无法全屏填充
*/
body {
  width: 100%;
  height: 100%;
}

.page {
  height: 100vh;
  /*
  background
  详细可看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
  */
  background-image: url(https://api.dujin.org/bing/1920.php);
  /* background-image: -webkit-cross-fade(url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), url(https://api.dujin.org/bing/1920.php), 75%); */
  /* background-image: cross-fade(url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), url(https://api.dujin.org/bing/1920.php), 30%); */
  /*
  background-attachment：决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
  详细可看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment
  */
  background-attachment: scroll !important;
  /*
   background-repeat: 背景图像的重复方式
  */
  background-repeat: no-repeat;
  /*
  background-position: 背景图片设置初始位置
  */
  background-position: center center;
  /*
  background-size: 背景图片大小
  cover：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
  */
  background-size: cover;
  overflow: hidden;
  text-align: center;
  color: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
  给图片添加遮罩
*/
.page::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.info {
  z-index: 1;
  font-weight: 700;
}

.scroll-down {
  position: absolute;
  width: 100%;
  bottom: 0px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}

.scroll-down-effects {
  animation: 1.5s ease 0s infinite normal none running scroll-down-effect;
}

/*
  keyframes(关键帧)：控制动画序列的中间步骤
  详细可看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes
*/
@keyframes scroll-down-effect {
  0% {
    bottom: 0px;
    opacity: 0.4;
  }

  50% {
    bottom: 10px;
    opacity: 1;
    /*

    详细可看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
    */
    filter: none;
  }

  100% {
    bottom: 0px;
    opacity: 0.4;
  }
}

.content p{
  height: 500px;
}

JavaScript文件

const btf = {
  scrollToDest: (pos, time = 500) => {
    /*
    pageYOffset：垂直方向滚动的像素
    */
    const currentPos = window.pageYOffset
    if (currentPos > pos) pos = pos - 70
    if ('scrollBehavior' in document.documentElement.style) {
      /*
      https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollTo
      */
      window.scrollTo({
        top: pos,
        behavior: 'smooth'
      })
      return
    }
  }
}
const scrollDownEle = document.getElementById('scrollDown');
scrollDownEle.addEventListener('click', function() {
  console.log("666");
  /*

  1. https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetTop
  2. https://www.runoob.com/jsref/prop-element-offsettop.html
  */
  btf.scrollToDest(document.getElementById('content-inner').offsetTop, 600)
})

幻灯片

效果预览

html文件

<div class="banner">
  <img src="http://iph.href.lu/600x300?text=图片1" alt="">
  <img class="b-img" src="http://iph.href.lu/600x300?text=图片2" alt="">
  <img class="b-img" src="http://iph.href.lu/600x300?text=图片3" alt="">
  <img class="b-img" src="http://iph.href.lu/600x300?text=图片4" alt="">
  <img class="b-img" src="http://iph.href.lu/600x300?text=图片5" alt="">
  <div class="pre">👈</div>
  <div class="next">👉</div>
  <div class="b-quan">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

Css文件

* {
  margin: 0px;
  padding: 0px;
}

.banner {
  width: 600px;
  height: 300px;
  margin: 0 auto;
  position: relative;
}

img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.b-img {
  opacity: 0;
}

li:nth-child(1){
  list-style: disc;
}

li{
  list-style: circle;
}

.pre,.next{
  position: absolute;
  top: 50%;
  z-index: 999;
  cursor: pointer;
}
.next{
  right: 0;
}

JavaScript文件

/* 
代码参考：
[jQuery实现轮播图 - 掘金](https://juejin.cn/post/6858605052978790414)
*/
let index = 0;
doStart(); // 默认开启
let imgLength = $('img').length;
// 自动轮播效果
function doStart() {
  myTime = setInterval(function() {
    //让上一张淡出
    imgOut(index);
    index = ++index % imgLength;
    //让下一张淡入
    imgIn(index);
  }, 3000);
}

$(".banner").mouseover(function() {
  clearInterval(myTime);
}).mouseout(function() {
  doStart();
});

$(".pre").click(function() {

  //让上一张淡出
  imgOut(index);
  index--;
  if (index < 0) {
    index = imgLength-1;
  }
  //让下一张淡入
  imgIn(index);
});


$(".next").click(function() {
  //让上一张淡出
  imgOut(index);
  index = ++index % imgLength;
  //让下一张淡入
  imgIn(index);
});

// 灰点事件
$("li").mouseover(function() { // 鼠标移入
  dotIn(this);
}).mouseout(function() { // 鼠标移出
  dotOut(this);
}).click(function() { // 单击
  // 不同的灰点单击才变换
  if (index != $(this).index()) {
    imgOut(index); // 当前的淡出
    index = $(this).index();
    imgIn(index); // 小圆点对应的淡入
  }
});

function imgIn(num) {
  $("img").eq(num).animate({
    "opacity": 1
  }, 1000);
  dotIn($("li").eq(num)); // 对应灰点亮起
}

// 图片淡出
function imgOut(num) {
  $("img").eq(num).animate({
    "opacity": 0
  }, 1000);
  dotOut($("li").eq(num)); // 对应灰点暗去
}

function dotIn(dot) {
  $(dot).css({
    "list-style": "disc"
  });
}

function dotOut(dot) {
  $(dot).css({
    "list-style": "circle"
  });
}

总结

通过这几天学习小项目，发现不知不觉有些样式竟然能自己默写出来，写不出来也大概知道需要用到哪些东西，一搜就解决了。这可能就是所谓的「熟能生巧」吧

如果你也正在学习前端，就动起手来吧，只有敲起代码，你才知道你有哪里不懂了。共勉。

css

打赏作者

非常感激每一位打赏的朋友！

支付宝

微信

扫一扫，请博主喝咖啡☕

文章作者: 斌仔

文章链接: https://www.wangdu.site/course/1134.html

1 条评论

小红说道：

2022年9月15日上午11:15

感谢分享，赞一个

回复

CSS 学习记录02：菜单悬浮、全屏Banner、幻灯片

菜单悬浮效果

html文件

Css文件

全屏banner

html文件

Css文件

JavaScript文件

幻灯片

html文件

Css文件

JavaScript文件

总结

CSS学习记录01：链接背景悬浮效果

Web前端资源01：不求最全，但求良心

1 条评论

发表回复取消回复

📄 公告

📢 活动公告

公众号、小程序

CSS 学习记录02：菜单悬浮、全屏Banner、幻灯片

菜单悬浮效果

html文件

Css文件

全屏banner

html文件

Css文件

JavaScript文件

幻灯片

html文件

Css文件

JavaScript文件

总结

CSS学习记录01：链接背景悬浮效果

Web前端资源01：不求最全，但求良心

相关推荐

1 条评论

发表回复 取消回复

📄 公告

📢 活动公告

公众号、小程序

发表回复取消回复