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
摘要 车辆牌照检测在智能交通系统中发挥着关键作用。检测汽车、卡车和面包车等的牌照对于执法、监控和收费站操作非常有用。如何快速准确地检测牌照对牌照识别至关重要。然而，在现实世界复杂捕捉场景中，光照条件不均匀或牌照拍摄角度的倾斜会发生剧烈变…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎（Physics Engine） 物理引擎 是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于 游戏开发、动画制作、虚…...
centos 7 部署awstats 网站访问检测
一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 （一）概念解析 TRS（Total Return Swap）收益互换是一种金融衍生工具，指交易双方约定在未来一定期限内，基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。 在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路：将增量判…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...
与常用工具深度洞察App瓶颈)
iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统：Ubuntu 24.04 LTS (WSL2)架构：x86_64 (GNU/Linux)Rust 版本：rustc 1.87.0 (2025-05-09)Cargo 版本：cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...