css-50 Projects in 50 Days(3)

ops/2024/11/20 3:23:00/

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

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


http://www.ppmy.cn/ops/135138.html

相关文章

SAM-Med2D 训练完成后boxes_prompt没有生成mask的问题

之前对着这这篇文章去微调SAM_Med2D(windows环境),发现boxes_prompt空空如也。查找了好长时间问题SAM-Med2D 大模型学习笔记&#xff08;续&#xff09;&#xff1a;训练自己数据集_sam训练自己数据集-CSDN博客 今天在看label2image_test.json文件的时候发现了一些端倪: 官方…

原生鸿蒙中实现RN热加载的详细步骤

在原生鸿蒙系统中进行React Native&#xff08;RN&#xff09;热加载&#xff0c;可以极大地提高开发效率&#xff0c;使开发者能够在不重启应用的情况下即时看到代码更改的效果。以下是在原生鸿蒙中实现RN热加载的详细步骤。 一、准备工作 创建鸿蒙原生项目&#xff1a; 在鸿…

HTTP常见的状态码有哪些,都代表什么意思

HTTP 协议定义了一系列的状态码&#xff0c;用于描述服务器对客户端请求的处理结果。这些状态码分为五个类别&#xff0c;每个类别都有特定的用途。 常见状态码 1开头 信息性状态码 这些状态码表示请求已被接收&#xff0c;继续处理。 100 Continue&#xff1a;客户端应继续…

golang对日期格式化

1.对日期格式化为 YYYY-mm-dd, 并且没有数据时&#xff0c;返回空 import ("encoding/json""time" )type DateTime time.Timetype SysRole struct {RoleId int64 gorm:"type:bigint(20);primary_key;auto_increment;角色ID;" json:&quo…

华为开源自研AI框架昇思MindSpore应用案例:人体关键点检测模型Lite-HRNet

如果你对MindSpore感兴趣&#xff0c;可以关注昇思MindSpore社区 一、环境准备 1.进入ModelArts官网 云平台帮助用户快速创建和部署模型&#xff0c;管理全周期AI工作流&#xff0c;选择下面的云平台以开始使用昇思MindSpore&#xff0c;获取安装命令&#xff0c;安装MindSpo…

Centos使用人大金仓ksql

文章目录 1.进入ksql的目录2.连接数据库3.切换数据库4.罗列模式下的相关表5.执行SQL脚本6.查看表结构 1.进入ksql的目录 [rootlocalhost ~]# cd /opt/package/Kingbase/ES/V8/KESRealPro/V008R006C008B0014/Server/bin [rootlocalhost bin]# 2.连接数据库 ./ksql 数据库 用户…

斯坦福iDP3——改进3D扩散策略以赋能人形机器人的训练:不再依赖相机校准和点云分割(含源码解析)

前言 今天10.23日&#xff0c;明天1024则将作为长沙程序员代表&#xff0c;在CSDN和长沙相关部门举办的1024程序员节开幕式上发言&#xff0c;欢迎广大开发者来长工作 生活 考察 创业&#xff0c;​包括我司七月也一直在招聘大模型与机器人开发人员 后天&#xff0c;则将和相关…

kafka中topic的数据抽取不到hdfs上问题解决

在上一个博客中有一个案例&#xff1a; 将json文件抽取到kafka的消息队列&#xff08;topic&#xff09;中&#xff0c;再从topic中将数据抽取到hdfs https://blog.csdn.net/qq_62984376/article/details/143759037?spm1001.2014.3001.5501 我们在从kafka中topic的数据抽到hdf…