css-50 Projects in 50 Days(3)
html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>旋转页面</title><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"></head><body><div id="container" class="container"><div class="content_wrapper"><div class="content"><div class="fs30 fw600 mt20 ">Amazing Article</div><div class="fs16 cr_555 italic">Florin Pop</div><p class="cr_555">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in rationedolores 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 quiaharum aut. Eum maxime dolorem provident natus veritatis molestiae cumque quod voluptates ab non,temporecupiditate? Voluptatem, molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolordignissimos in error placeat quae temporibus minus optio eum soluta cupiditate! Cupiditate saepevoluptates laudantium. Ducimus consequuntur perferendis consequatur nobis exercitationem molestiasfugiat commodi omnis. Asperiores quia tenetur nemo ipsa.</p><h3>My Xxx</h3><img src="https://fastly.picsum.photos/id/866/1000/666.jpg?hmac=2bUfqZW-BtFbQv1wQf9cZrTnbI-mKI3cR5QJw4d4ycI"alt="" srcset="" /><p class="cr_555">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerumquo,incidunt vel consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam ataliquid. Perferendis totam placeat molestias illo laudantium? Minus id minima doloribus dolorumfugitdeserunt qui vero voluptas, ut quia cum amet temporibus veniam ad ea ab perspiciatis, enim accusamusasperiores explicabo provident. Voluptates sint, neque fuga cum illum, tempore autem maximesimiliquelaborum odio, magnam esse. Aperiam?</p></div></div></div><div id="left" class="left "><div class="item"> <span class="fas fa-home mr8"></span><span>Home</span></div><div class="item"><span class="fas fa-user-alt mr8"></span> <span>About</span></div><div class="item"><span class="fas fa-envelope mr8"></span> <span>Contact</span></div></div><div id="rotate" class="rotate cur"><div class="rotate_item"><span class="fas fa-times"></span></div><div class="rotate_item"><span class="fas fa-bars"></span></div></div><script src="./index.js"></script>
</body></html>css
html,
body {padding: 0;margin: 0;background-color: #333;
}.fs30 {font-size: 30px;
}.fs24 {font-size: 24px;
}.fs16 {font-size: 16px;
}.mt20 {margin-top: 20px;
}.mt32 {margin-top: 32px;
}.mb32 {margin-bottom: 32px;
}.mb6 {margin-bottom: 6px;
}.mr8 {margin-right: 8px;
}.fw600 {font-weight: 600;
}.cr_555 {color: #555;
}.cr_999 {color: #999;
}.italic {font-style: italic;
}.cur {cursor: pointer;
}.container_active {transform: rotate(-20deg);
}.container {position: relative;width: 100%;min-height: 100vh;overflow-y: auto;background-color: #fafafa;transition: all 0.5s ease;transform-origin: top left;.content_wrapper {display: flex;flex-direction: column;align-items: center;.content {padding: 50px;margin: 50px auto;max-width: 1000px;}.content_active {transform: rotate(20deg);}}}.left {bottom: 40px;position: fixed;z-index: 100;padding: 0%;font-size: 18px;font-weight: 600;color: #fff;display: flex;flex-direction: column;gap: 30px;padding: 30px;.item {transition: transform 0.4s ease-in;}.item:nth-of-type(1) {padding-left: 0;transform: translateX(-100%);}.item:nth-of-type(2) {padding-left: 15px;transform: translateX(-150%);}.item:nth-of-type(3) {padding-left: 30px;transform: translateX(-200%);}}.left_active {.item {transition: transform 0.4s ease-in;transition-delay: 0.3s;}.item:nth-of-type(1) {transform: translateX(0%);}.item:nth-of-type(2) {transform: translateX(0%);}.item:nth-of-type(3) {transform: translateX(0%);}
}.rotate {$w: 26px;position: absolute;left: -100px;top: -100px;width: 200px;height: 200px;background-color: #ff7979;border-radius: 50%;display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 100px;font-size: 26px;color: #fff;transition: all 0.5s ease;transform: rotate(0);.rotate_item {position: relative;}.rotate_item:nth-of-type(1) {width: 100%;height: 100%;grid-row: 2/2;span {position: absolute;left: 50%;top: 30%;}}.rotate_item:nth-of-type(2) {width: 100%;height: 100%;grid-row: 2/2;grid-column: 2/2;span {position: absolute;left: 30%;top: 30%;}}
}.rotate_active {transform: rotate(-90deg);
}js
const state = {containerBox: document.querySelector('#container'),rotateBox: document.querySelector('#rotate'),leftBox: document.querySelector('#left'),
}state.rotateBox.onclick = () => {state.containerBox.classList.toggle('container_active')state.leftBox.classList.toggle('left_active')
}相关文章：
css-50 Projects in 50 Days(3)
html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>旋转页面</title><link rel"sty…...
另外一种缓冲式图片组件的用法
文章目录 1. 概念介绍2. 使用方法2.1 基本用法2.2 缓冲原理3. 示例代码4. 内容总结我们在上一章回中介绍了"FadeInImage组件"相关的内容，本章回中将介绍CachedNetworkImage组件.闲话休提，让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章回中介绍的CachedNetwo…...
字节青训-小C的外卖超时判断、小C的排列询问
目录 一、小C的外卖超时判断 问题描述 测试样例 解题思路： 问题理解 数据结构选择 算法步骤 最终代码： 运行结果： 二、小C的排列询问 问题描述 测试样例 最终代码： 运行结果： 编辑 一、小C的外卖超时判断…...
PHP 伪静态详解及实现方法
概述 在现代 Web 开发中，URL 的设计对用户体验和搜索引擎优化（SEO）至关重要。动态 URL 虽然功能强大，但往往显得冗长且不友好。伪静态（URL 重写）技术通过将动态 URL 转换为静态样式，不仅提高了…...
Spring Boot 简单预览PDF例子
目录 前言 一、引入依赖 二、使用步骤 1.创建 Controller 处理 PDF 生成和预览 2.创建预览页面 总结 前言 使用 Spring Boot 创建一个生成 PDF 并进行预览的项目，你可以按以下步骤进行。我们将使用 Spring Boot、Thymeleaf、iText 等技术来完成这个任务。 一、引入…...
【魔珐有言-注册/登录安全分析报告-无验证方式导致安全隐患】
前言 由于网站注册入口容易被机器执行自动化程序攻击，存在如下风险： 暴力破解密码，造成用户信息泄露，不符合国家等级保护的要求。短信盗刷带来的拒绝服务风险 ，造成用户无法登陆、注册，大量收到垃圾短信的…...
LabVIEW 使用 Snippet
在 LabVIEW 中，Snippet（代码片段） 是一个非常有用的功能，它允许你将 一小段可重用的代码 保存为一个 图形化的代码片段，并能够在不同的 VI 中通过拖放来使用。 什么是 Snippet？ Snippet 就是 LabVIEW 中的…...
单片机_day3_GPIO
目录 1. 灯如何才能亮 1.1原理图 1.2 二极管 1.3 换了一个灯和原理图 编辑 1.4 三极管 1.4.1 NPN型三极管 1.4.2 PNP型三极管 2. 基本概念 3. 输入 3.1 浮空输入 3.2 上拉输入 3.3 下拉输入 3.4 模拟输入 4. 输出 4.1 推挽输出 4.2 开漏输出 如何让开漏输出…...
Python小游戏24——小恐龙躲避游戏
首先，你需要安装Pygame库。如果你还没有安装，可以通过以下命令安装： 【bash】 pip install pygame 【python】代码 import pygame import random # 初始化Pygame pygame.init() # 设置屏幕尺寸 screen_width 800 screen_height 600 screen …...
Python 的多态笔记
Python的多态实际是通过instance 实现的 class Person:def __init__(self, name,age):self.name nameself.age agedef feed_pet(self,pet):#isinastance(obj,类)-->判断obj,是不是这个类的对象，或者判断obj是不是该类的子类的对象if isinstance(pet, Pet):sel…...
go module使用
go module介绍 go module是go官⽅⾃带的go依赖管理库,在1.13版本正式推荐使⽤ go module可以将某个项⽬(⽂件夹)下的所有依赖整理成⼀个 go.mod ⽂件,⾥⾯写⼊了依赖的版本等 使⽤ go module之后我们可不⽤将代码放置在src下了 使⽤ go module 管理依赖后会在项⽬根⽬录下⽣成…...
c ++零基础可视化——数组
c 零基础可视化 数组 一些知识： 关于给数组赋值，一个函数为memset，其在cplusplus.com中的描述如下： void * memset ( void * ptr, int value, size_t num );Sets the first num bytes of the block of memory pointed by ptr to…...
CVE-2024-2961漏洞的简单学习
简单介绍 PHP利用glibc iconv()中的一个缓冲区溢出漏洞，实现将文件读取提升为任意命令执行漏洞 在php读取文件的时候可以使用 php://filter伪协议利用 iconv 函数, 从而可以利用该漏洞进行 RCE 漏洞的利用场景 PHP的所有标准文件读取操作都受到了影响࿱…...
计算机组成原理笔记----基础篇
计算机系统硬件软件 软件 ├── 系统软件 │ ├── 操作系统 │ └── 工具软件 └── 应用软件├── 办公软件├── 媒体软件└── 浏览器软件硬件 ├── 计算机硬件 │ ├── 中央处理器（CPU） │ ├── 存储设备 │ │ ├── …...
TheadLocal出现的内存泄漏具体泄漏的是什么？弱引用在里面有什么作用？什么情景什么问题？
首先ThreadLocal是什么就不介绍了！这篇是讲讲里面的东西。 再简单说一下强引用和弱引用，举个例子，我们平常new出来的对象就是强引用的，在栈中有强引用，所以在gc的时候，堆中的实例对象不会被清除掉。 弱引…...
AI在电商平台中的创新应用：提升销售效率与用户体验的数字化转型
1. 引言 AI技术在电商平台的应用已不仅仅停留在基础的数据分析和自动化推荐上。随着人工智能的迅速发展，越来越多的电商平台开始将AI技术深度融合到用户体验、定价策略、供应链优化、客户服务等核心业务中，从而显著提升运营效率和用户满意度。在这篇文章…...
CTF-RE 从0到N:RC4
RC4加密算法简介 RC4是由Ron Rivest于1987年设计的一种流加密算法。它通过伪随机数生成器生成密钥流，并将该密钥流与明文进行异或运算来完成加密和解密。 RC4的加密流程 RC4主要包含两个阶段： 密钥调度算法 (Key Scheduling Algorithm, KSA)ÿ…...
HbuilderX 插件开发-模板创建
实现思路 使用HbuilderX 打开某个文档时右键点击的时候获取当前打开的文档内容使用 API 替换为自己的模板 示例 package.json {"id": "SL-HbuilderX-Tool","name": "SL-HbuilderX-Tool","description": "快速创建h…...
打造专业问答社区：Windows部署Apache Answer结合cpolar实现公网访问
文章目录 前言1. 本地安装Docker2. 本地部署Apache Answer2.1 设置语言选择简体中文2.2 配置数据库2.3 创建配置文件2.4 填写基本信息 3. 如何使用Apache Answer3.1 后台管理3.2 提问与回答3.3 查看主页回答情况 4. 公网远程访问本地 Apache Answer4.1 内网穿透工具安装4.2 创建…...
YOLO-SLD: An Attention Mechanism-ImprovedYOLO for License Plate Detection
摘要 车辆牌照检测在智能交通系统中发挥着关键作用。检测汽车、卡车和面包车等的牌照对于执法、监控和收费站操作非常有用。如何快速准确地检测牌照对牌照识别至关重要。然而，在现实世界复杂捕捉场景中，光照条件不均匀或牌照拍摄角度的倾斜会发生剧烈变…...
ArcGIS的汉字（亚洲文本）垂直标注
01 需求说明 实现ArcGIS的汉字（亚洲文本的垂直标注）。 启用 Maplex 标注引擎。 在标注 工具条上单击标注管理器按钮 。 选中要进行标注的图层旁边的复选框。 选择图层下方的标注分类。 单击符号。 选中 CJK 字符方向复选框。 仅当字体有垂直的文本度…...
【面试题】
1.UART 和 IIC 的区别 UART (Universal Asynchronous Receiver-Transmitter) 用途：用于异步串行通信。信号线：通常需要两根线（TX 和 RX），有时还需一根地线。通信方式：点对点。数据传输：单向或…...
Leetcode 寻找峰值
为了实现时间复杂度为 O ( log n ) O(\log n) O(logn)，可以使用二分查找法： 解题思路： 峰值的特性是：当前元素大于左右相邻元素。使用二分法： 如果 nums[mid] > nums[mid 1]，说明峰值在左侧或当前…...
探索大规模语言模型（LLM）在心理健康护理领域中的应用与潜力
概述 心理健康是公共卫生最重要的领域之一。根据美国国家精神卫生研究所（NIMH）的数据，到 2021 年，22.8% 的美国成年人将患上某种形式的精神疾病。在全球范围内，精神疾病占非致命性疾病负担的 30%，并被世界…...
Infisical开源密钥管理平台实战指南
1. 引言 在现代软件开发中，安全地管理环境变量和敏感信息已成为一个关键挑战。Infisical作为一个开源的密钥管理平台，为这一问题提供了强大而灵活的解决方案。本指南将深入探讨Infisical的功能，并通过实际操作步骤，帮助读者全面了解和使用这个工具。 2. Infisical概述 I…...
AI大模型：重塑软件开发流程与模式
人工智能技术的飞速发展，尤其是AI大模型的兴起，正以前所未有的速度和深度影响着各行各业，其中软件开发领域尤为显著。AI大模型，如GPT系列、BERT、Claude等通过其强大的自然语言处理能力、代码理解和生成能力，正在从根本…...
AMD(Xilinx) FPGA配置Flash大小选择
目录 1 FPGA配置Flash大小的决定因素2 为什么选择的Flash容量大小为最小保证能够完成整个FPGA的配置呢？ 1 FPGA配置Flash大小的决定因素 在进行FPGA硬件设计时，选择合适的配置Flash是我们进行硬件设计必须考虑的，那么配置Flash大小的选择由什…...
基于Java Springboot图书借阅系统
一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术：Html、Css、Js、Vue、Element-ui 数据库：MySQL 后端技术：Java、Spring Boot、MyBatis 三、运行环境 开发工具：IDEA/eclipse 数据…...
DDRPHY数字IC后端设计实现系列专题之数字后端floorplanpowerplan设计
3.2.3 特殊单元的布局 布图阶段除了布置 I/O 单元和宏单元，在 28nm 制程工艺时，还需要处理两种特 殊的物理单元，Endcap 和 Tapcell。 DDRPHY数字IC后端设计实现系列专题之后端设计导入，IO Ring设计 （1）拐…...
【Mysql】Mysql函数（上）
1、概述 在Mysql中，为了提高代码重用性和隐藏实现细节，Mysql提供了很多函数。函数可以理解为封装好的模块代码。 2、分类 在Mysql中，函数非常多，主要可以分为以下几类： （1）聚合函数 …...