【每日一练】142—页面旋转显示导航栏效果的实现

最新推荐文章于 2023-09-20 13:34:36 发布

web前端开发V

最新推荐文章于 2023-09-20 13:34:36 发布

阅读量211

点赞数 1

文章标签： javascript 前端 html 开发语言 ecmascript

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649135868&idx=2&sn=9f07b35c98bb7fa8e311db8e98f3071a&chksm=be58bd51892f344753eeb2909b0a53fd2240a67b09976df4510480d02213faafe4d1194d4a23&scene=126&sessionid=0

版权

今天这个效果，不是纯CSS实现的，它借助了点JavaScript技能，不过，你不懂JavaScript也没有关系，先跟着练习，一边练习一边查看相关知识点就好了。

在这个练习，我们主要是想跟大家一起来练习JavaScript中的getElementById这个方法，它是JavaScript中非常重要的一个方法，也是每个学习JavaScript的小伙伴必须要掌握的方法。

当然，也是比较基础的知识，希望大家都会。

现在，我们还是一起来看一下今天练习的最终效果：

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>【每日一练】142—页面旋转导航的实现</title>
  </head>
  <body>
    <div class="container">
      <div class="circle-container">
        <div class="circle">
          <button id="close">
            <i class="fas fa-times"></i>
          </button>
          <button id="open">
            <i class="fas fa-bars"></i>
          </button>
        </div>
      </div>


      <div class="content">
        <h1>什么是ChatGPT</h1>
        <small>web前端开发公众号</small>
        <p>最近，ChatGPT火的不行呀，关于学习如何使用它以及开发新应用的，也非常多。今天我们就一起来聊一聊这个火遍全网的机器人。
        其实，对于那些不熟悉GAN 的人来说，它们是一种神经网络，它使用两个相互竞争的网络——一个生成器和一个鉴别器——来创建逼真的输出。生成器创建假输出，而鉴别器则试图区分假输出和真实数据之间的区别。通过这个来回过程，GAN 能够产生与真实数据无法区分的输出。


ChatGPT 采用了这一概念并将其应用于基于文本的对话。它使用 GAN 生成对输入文本的响应，使其能够与人类进行听起来自然的对话。


但这里有一个问题——ChatGPT 的回应只是在切线上触及现实。虽然它们听起来很有说服力，但它们最终是 GAN 的虚构创作。


这听起来像是一个缺点，但它实际上使 ChatGPT 非常有用。因为它不受现实的约束，ChatGPT 可以参与完全想象的对话并提供创造性的、开箱即用的响应。</p>
        <h3>ChatGPT</h3>
        <img src="chatgpt01.jpg" />
        <p>最近，ChatGPT火的不行呀，关于学习如何使用它以及开发新应用的，也非常多。今天我们就一起来聊一聊这个火遍全网的机器人。
           其实，对于那些不熟悉GAN 的人来说，它们是一种神经网络，它使用两个相互竞争的网络——一个生成器和一个鉴别器——来创建逼真的输出。生成器创建假输出，而鉴别器则试图区分假输出和真实数据之间的区别。通过这个来回过程，GAN 能够产生与真实数据无法区分的输出。


ChatGPT 采用了这一概念并将其应用于基于文本的对话。它使用 GAN 生成对输入文本的响应，使其能够与人类进行听起来自然的对话。


但这里有一个问题——ChatGPT 的回应只是在切线上触及现实。虽然它们听起来很有说服力，但它们最终是 GAN 的虚构创作。


这听起来像是一个缺点，但它实际上使 ChatGPT 非常有用。因为它不受现实的约束，ChatGPT 可以参与完全想象的对话并提供创造性的、开箱即用的响应。</p>
      </div>
    </div>


    <nav>
      <ul>
        <li><i class="fas fa-home"></i><a href="http://www.webqdkf.com"> 主页</a></li>
        <li><i class="fas fa-user-alt"></i><a href="http://www.webqdkf.com"> 关于</a></li>
        <li><i class="fas fa-envelope"></i><a href="http://www.webqdkf.com"> 联系</a></li>
      </ul>
    </nav>
    <script src="script.js"></script>
  </body>
</html>

CSS代码：

* {
  box-sizing: border-box;
}


body {
  font-family: 'Lato', sans-serif;
  background-color: #333;
  color: #222;
  overflow-x: hidden;
  margin: 0;
}


.container {
  background-color: #fafafa;
  transform-origin: top left;
  transition: transform 0.5s linear;
  width: 100vw;
  min-height: 100vh;
  padding: 50px;
}


.container.show-nav {
  transform: rotate(-20deg);
}


.circle-container {
  position: fixed;
  top: -100px;
  left: -100px;
}


.circle {
  background-color: #00A6BC;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  position: relative;
  transition: transform 0.5s linear;
}


.container.show-nav .circle {
  transform: rotate(-70deg);
}


.circle button {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100px;
  background: transparent;
  border: 0;
  font-size: 26px;
  color: #fff;
}


.circle button:focus {
  outline: none;
}


.circle button#open {
  left: 60%;
}


.circle button#close {
  top: 60%;
  transform: rotate(90deg);
  transform-origin: top left;
}


.container.show-nav + nav li {
  transform: translateX(0);
  transition-delay: 0.3s;
}


nav {
  position: fixed;
  bottom: 40px;
  left: 0;
  z-index: 100;
}


nav ul {
  list-style-type: none;
  padding-left: 30px;
}


nav ul li {
  text-transform: uppercase;
  color: #fff;
  margin: 40px 0;
  transform: translateX(-100%);
  transition: transform 0.4s ease-in;
}


nav ul li i {
  font-size: 20px;
  margin-right: 10px;
}


nav ul li + li {
  margin-left: 15px;
  transform: translateX(-150%);
}


nav ul li + li + li {
  margin-left: 30px;
  transform: translateX(-200%);
}


nav a{
  color: #fafafa;
  text-decoration: none;
  transition: all 0.5s;
}


nav a:hover {
  color: #00A6BC;
  font-weight: bold;
}


.content img {
  max-width: 100%;
}


.content {
  max-width: 1000px;
  margin: 50px auto;
}


.content h1 {
  margin: 0;
}


.content small {
  color: #555;
  font-style: italic;
}


.content p {
  color: #333;
  line-height: 1.5;
}

JS代码：

const open = document.getElementById('open')
const close = document.getElementById('close')
const container = document.querySelector('.container')


open.addEventListener('click', () => container.classList.add('show-nav'))


close.addEventListener('click', () => container.classList.remove('show-nav'))

写在最后

以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

推荐阅读

【每日一练】01~100练大合集汇总

学习更多技能

请点击下方公众号

web前端开发V

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【每日一练】142—页面旋转显示导航栏效果的实现

今天这个效果，不是纯CSS实现的，它借助了点JavaScript技能，不过，你不懂JavaScript也没有关系，先跟着练习，一边练习一边查看相关知识点就好了。在这个练习，我们主要是想跟大家一起来练习JavaScript中的getElementById这个方法，它是JavaScript中非常重要的一个方法，也是每个学习JavaScript的小伙伴必须要掌握的方法。当然，也是比较基础的知识，希望大家...
复制链接

扫一扫