50天五十个项目——day4旋转导航动画

最新推荐文章于 2024-06-25 10:05:02 发布

丶fest

最新推荐文章于 2024-06-25 10:05:02 发布

阅读量209

点赞数

分类专栏：前端. 文章标签： javascript 前端开发语言 css html5

本文链接：https://blog.csdn.net/qq_47922019/article/details/127004280

版权

前端. 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

代码来自于github上的50projects50days，我加了一些注释

效果图展示Rotating Navigation Animation（可能需要科学上网）

话不多说直接上代码（代码中的图片url和网址之类的可能需要科学上网，如果没有的话可以考虑欢称自己的图片）

大部分解释都在代码注释中，可能会随着天数的增加而减少代码（因为记住了）

HTML

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <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" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index.css">
        <title>旋转导航动画</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>Amazing Article</h1>
              <small>Florin Pop</small>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem, molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.</p>
      
              <h3>My Dog</h3>
              <img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="doggy" />
              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates sint, neque fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam?</p>
            </div>
          </div>
      
          <nav>
            <ul>
              <li><i class="fas fa-home"></i><a href="#"> Home</a></li>
              <li><i class="fas fa-user-alt"></i><a href="#"> About</a></li>
              <li><i class="fas fa-envelope"></i><a href="#"> Contact</a></li>
            </ul>
          </nav>


        <script src="index.js"></script>
    </body>
</html>

css

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');


* {
    box-sizing: border-box;
  }

body {
    font-family: 'Lato', sans-serif;
    background-color: #333;
    color: #222;
    /* 当一个块级元素的内容在水平方向发生溢出时，CSS属性 overflow-x 决定应该截断溢出内容，或者显示滚动条，或者直接显示溢出内容。 */
    overflow-x: hidden;
    margin: 0;
}

.container {
    background-color: #fafafa;
    /* 更改一个元素变形的原点 */
    transform-origin: top left;
    transition: transform 0.5s linear;
    width: 100vw;
    /* 设置元素的最小高度。这样能够防止 height 属性的应用值小于 min-height 的值。 */
    min-height: 100vh;
    padding: 50px;
}

/* .show_nav是在js中加的 */
.container.show-nav {
    /* transform 属性允许你旋转，缩放，倾斜或平移给定元素 */
    transform: rotate(-20deg);
}

.circle-container {
    /* 固定定位 */
    position: fixed;
    top: -100px;
    left: -100px;
}

.circle {
    background-color: #ff7979;
    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 属性是在一条声明中设置多个轮廓属性的简写属性  */
    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: #ff7979;
    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;
}

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'))