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
摘要 车辆牌照检测在智能交通系统中发挥着关键作用。检测汽车、卡车和面包车等的牌照对于执法、监控和收费站操作非常有用。如何快速准确地检测牌照对牌照识别至关重要。然而，在现实世界复杂捕捉场景中，光照条件不均匀或牌照拍摄角度的倾斜会发生剧烈变…...
TD-ACC+实验系统入门指南：手把手教你搭建典型环节模拟电路
TD-ACC实验系统实战手册：从零构建典型环节电路的21个关键细节 第一次接触TD-ACC实验系统时，看着密密麻麻的接口和旋钮，我的手指悬在半空迟迟不敢落下——生怕一个错误的连接就会烧毁昂贵的运算放大器。这种忐忑直到成功捕捉到第一个完美方波信…...
DS4Windows手柄适配工具全解析：从安装到高级配置的完美指南
DS4Windows手柄适配工具全解析：从安装到高级配置的完美指南 【免费下载链接】DS4Windows Like those other ds4tools, but sexier 项目地址: https://gitcode.com/gh_mirrors/ds/DS4Windows 在PC游戏领域，手柄支持一直是玩家体验的关键环节。许多…...
物理引擎核心原理拆解：GJK算法如何用Support函数取代SAT检测
物理引擎核心原理拆解：GJK算法如何用Support函数取代SAT检测 在实时物理模拟的世界里，碰撞检测算法的效率直接决定了虚拟世界的真实感与流畅度。当两个刚体在三维空间中高速运动时，传统分离轴定理（SAT）需要检测多达15组…...
【Java 21记录模式性能优化终极指南】：3个被90%开发者忽略的模式匹配陷阱及提速300%的实战方案
第一章：Java 21记录模式性能优化全景概览Java 21 引入的记录模式（Record Patterns）不仅提升了模式匹配的表达力，更在JVM层面实现了多项关键性能优化。通过与模式匹配（Pattern Matching for instanceof）和解…...
深入OpenHarmony NAPI引擎：从‘@ohos.hilog’导入到so库加载的底层链路剖析
深入OpenHarmony NAPI引擎：从‘ohos.hilog’导入到so库加载的底层链路剖析 当开发者在OpenHarmony应用中写下import hilog from ohos.hilog时，背后隐藏着一套精密的系统级协作机制。这条看似简单的语句，实际上触发了从JavaScript语法解析到原…...
‘报错和依赖冲突)
PyCharm+Conda环境避坑指南：手把手配置Real-ESRGAN，解决‘torch.cuda.is_available()‘报错和依赖冲突
PyCharmConda环境避坑指南：手把手配置Real-ESRGAN，解决‘torch.cuda.is_available()‘报错和依赖冲突 图像超分辨率技术正在改变我们处理低质量图像的方式，而Real-ESRGAN作为当前最先进的通用图像修复模型之一，其效果令人惊艳。但…...
Beyond Compare 5终极激活指南：免费获取永久授权密钥的完整教程
Beyond Compare 5终极激活指南：免费获取永久授权密钥的完整教程 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen Beyond Compare 5作为业界领先的文件对比工具，其强大的功…...
2026年全国优质网站建设公司权威甄选榜，推荐十家公司官网搭建与设计制作服务商能力评估正式发布
据Gartner、QuestMobile联合发布的2026年企业数字化服务报告显示，国内网站建设行业市场规模突破1870亿元，同比增长19.3%；上海作为长三角数字经济核心枢纽，企业官网新建与升级需求同比提升27.8%，其中高端定制建站需求增…...
从Prompt到Agent：收藏这份LLM应用落地演进指南，小白程序员必备！
本文介绍了LLM应用落地的演进过程，从最初的Prompt工程阶段，到Chain编排阶段，再到最新的Agent阶段。文章详细阐述了每个阶段的原理、优缺点及应用实例，并提供了基于Golang的Agent实现示例。通过学习本文，读者可以了解LL…...
使用Papanastasiou正交模型求解‘宾汉姆浆液在5mm开度裂隙中，注浆压力1MPa、塑...
使用Papanastasiou正交模型求解宾汉姆浆液单一裂隙注浆扩散范围 裂隙开度5mm，注浆管半径2.5cm，注浆压力1MPa 塑性粘度6PaS，屈服应力2Pa COMSOL注浆打开COMSOL新建一个流体模型，先别急着点确定——宾汉姆流体这种带屈服应力的家伙&…...