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
摘要 车辆牌照检测在智能交通系统中发挥着关键作用。检测汽车、卡车和面包车等的牌照对于执法、监控和收费站操作非常有用。如何快速准确地检测牌照对牌照识别至关重要。然而，在现实世界复杂捕捉场景中，光照条件不均匀或牌照拍摄角度的倾斜会发生剧烈变…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中，我们已经大致实现了rpc服务端的各项功能代…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：
在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档，…...
安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...
理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的
修改bug思路： 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑：async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...
SpringAI实战：ChatModel智能对话全解
一、引言：Spring AI 与 Chat Model 的核心价值 🚀 在 Java 生态中集成大模型能力，Spring AI 提供了高效的解决方案 🤖。其中 Chat Model 作为核心交互组件，通过标准化接口简化了与大语言模型（LLM࿰…...
MySQL的pymysql操作
本章是MySQL的最后一章，MySQL到此完结，下一站Hadoop！！！ 这章很简单，完整代码在最后，详细讲解之前python课程里面也有，感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...
LangChain 中的文档加载器（Loader）与文本切分器（Splitter）详解《二》
🧠 LangChain 中 TextSplitter 的使用详解：从基础到进阶（附代码） 一、前言 在处理大规模文本数据时，特别是在构建知识库或进行大模型训练与推理时，文本切分（Text Splitting） 是一个…...