Day3——页面旋转

最新推荐文章于 2023-12-29 10:36:50 发布

我不喜欢过马路

最新推荐文章于 2023-12-29 10:36:50 发布

阅读量657

点赞数 1

分类专栏： HTML+CSS+JS 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_43215827/article/details/121692399

版权

HTML+CSS+JS 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

前言：这个系列的代码均为GitHub上项目代码，我是为了巩固前端HTML、CSS和JS的基础学习。关于代码解析部分，这是我所理解的代码意义，如果感觉有不对的地方，请指出我们一起探讨。

一、总体效果

在这里插入图片描述

功能：点击左上角导航栏后，页面整体旋转。

实现方式：新建一个文件夹，文件夹中新建三个txt,改后缀，分别命名style.css;script.js;index.html;将下面三部分代码对应放入。

二、JavaScript代码

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

代码解析

第1行：利用document.getElementById（‘ID’）方式得到匹配id的元素。
语法：var element = document.getElementById(id);
参数: element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.

第2行：同上，这两句是为了查找open和close元素作为变量。

第3行：获取文档中class=“.container”的所有元素
语法：elementList = document.querySelectorAll(selectors);
参数：elementList 是一个静态的 NodeList 类型的对象。
selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串。

第4行：
1、利用element.addEventListener()方法向指定元素添加事件句柄。
语法： element.addEventListener(event, function, useCapture)
在这里插入图片描述

2、利用element.classList.add(),为元素添加新的类在这里插入图片描述

第5行：同上。

三、CSS代码

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

*{
    box-sizing: border-box;
}

body{
    /*设置body样式*/
    font-family: 'Lato', sans-serif;
    background-color: #333;
    color: #222;
    overflow-x: hidden;
    margin: 0;
}

.container{
    /*类选择器，设置大容器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{
    /*设置圆样式，即页面左上角的1/4圆*/
    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: 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是设置导航栏左下角每行样式，每行内容的样式*/
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;
}

代码解析
CSS代码解析在代码中注释，作用是设置每个元素的显示格式等。

四、HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Navigation</title>
    <link rel="stylesheet" href="style.css"/>
    <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" />
</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. 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>

            <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="script.js"></script>
    
</body>
</html>

代码解析：
HTML代码设置了页面放置什么，大容器中放小容器，本次代码简单框架如下。
在这里插入图片描述
小结：
1、发现JS代码中，频繁使用element.addEventListener()方法向指定元素添加事件句柄；利用element.classList.add(),为元素添加新的类；
2、页面能够旋转，CSS中角度的设置很重要，可以修改CSS中角度，测试不同角度旋转的效果。

拍的夕阳，愿你我被世界温柔以待。
在这里插入图片描述
后期继续进行代码解析，加油！
转载请说明出处，谢谢！

我不喜欢过马路

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day3——页面旋转

前言：这个系列的代码均为GitHub上项目代码，我是为了巩固前端HTML、CSS和JS的基础学习。关于代码解析部分，这是我所理解的代码意义，如果感觉有不对的地方，请指出我们一起探讨。一、总体效果功能：点击左上角导航栏后，页面整体旋转。实现方式：新建一个文件夹，文件夹中新建三个txt,改后缀，分别命名style.css;script.js;index.html;将下面三部分代码对应放入。二、JavaScript代码const open=document.getElementById('open'
复制链接

扫一扫