前端html js css 基础巩固3
一个这样的首页 滑动显示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');:root {--left-bg-color: rgba(87, 84, 236, 0.7);--right-bg-color: rgba(43, 43, 43, 0.8);--left-btn-hover-color: rgba(87, 84, 236, 1);--right-btn-hover-color: rgba(28, 122, 28, 1);--hover-width: 75%;--other-width: 25%;--speed: 1000ms;}* {box-sizing: border-box;}body {font-family: 'Roboto', sans-serif;height: 100vh;overflow: hidden;margin: 0;}h1 {font-size: 3.5rem;color: #fff;position: absolute;left: 50%;top: 20%;transform: translateX(-50%);white-space: nowrap;}.btn {position: absolute;display: flex;align-items: center;justify-content: center;left: 50%;top: 40%;transform: translateX(-50%);text-decoration: none;color: #fff;border: #fff solid 0.2rem;font-size: 1rem;font-weight: bold;text-transform: uppercase;width: 15rem;padding: 1.5rem;}.split.left .btn:hover {background-color: var(--left-btn-hover-color);border-color: var(--left-btn-hover-color);}.split.right .btn:hover {background-color: var(--right-btn-hover-color);border-color: var(--right-btn-hover-color);}.container {position: relative;width: 100%;height: 100%;background: #333;}.split {position: absolute;width: 50%;height: 100%;overflow: hidden;}.split.left {left: 0;background: url('ps.jpg');background-repeat: no-repeat;background-size: cover;}.split.left::before {content: '';position: absolute;width: 100%;height: 100%;background-color: var(--left-bg-color);}.split.right {right: 0;background: url('xbox.jpg');background-repeat: no-repeat;background-size: cover;}.split.right::before {content: '';position: absolute;width: 100%;height: 100%;background-color: var(--right-bg-color);}.split.right,.split.left,.split.right::before,.split.left::before {transition: all var(--speed) ease-in-out;}.hover-left .left {width: var(--hover-width);}.hover-left .right {width: var(--other-width);}.hover-right .right {width: var(--hover-width);}.hover-right .left {width: var(--other-width);}@media (max-width: 800px) {h1 {font-size: 2rem;top: 30%;}.btn {padding: 1.2rem;width: 12rem;}}</style>
</head><body><div class="container"><div class="split left"><h1>Playstation 5</h1><a href="#" class="btn">Buy Now</a></div><div class="split right"><h1>XBox Series X</h1><a href="#" class="btn">Buy Now</a></div></div><script>const left = document.querySelector('.left')const right = document.querySelector('.right')const container = document.querySelector('.container')left.addEventListener('mouseenter', () => container.classList.add('hover-left'))left.addEventListener('mouseleave', () => container.classList.remove('hover-left'))right.addEventListener('mouseenter', () => container.classList.add('hover-right'))right.addEventListener('mouseleave', () => container.classList.remove('hover-right'))</script>
</body></html>以上是全部的代码
相关文章：
前端html js css 基础巩固3
一个这样的首页 滑动显示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>&l…...
如在下载自己的需要的rmp包呢
下载地址：https://pkgs.org/和https://rpmfind.net/linux/rpm2html/search.php 根基自己的需要进行下载使用。...
Android TextView实现一串文字特定几个字改变颜色
遇到一个需求，让Android端实现给定一个字符串指定下标的几个字颜色与其他字颜色不一致。 主要是用ForegroundColorSpan这个API来传入颜色值，用SpannableString来设置指定索引下标的字的颜色值。 这里通过给定一个输入文字描述框，要求输入指定…...
桃子叶片病害分类检测数据集（猫脸码客 第221期）
桃子叶片病害分类检测数据集 一、引言 桃子作为世界上广泛种植的果树之一，其叶片的健康状况直接关系到果实的产量和品质。然而，桃子叶片易受多种病害的侵袭，这些病害不仅影响叶片的光合作用，还可能导致果实减产、品质下降&#…...
Vue--》掌握自定义依赖引入的最佳实践
在现代前端开发中，vue凭借其灵活性和高效性，已成为开发者们的宠儿，然而随着项目的复杂度提升，如何高效地管理和引入依赖，尤其是自定义引入依赖，成为了许多开发者面临的一大挑战。无论是为了优化加载速度&am…...
repo 命令大全详解（第十四篇 repo overview）
repo overview 命令用于显示当前项目的概览信息，帮助用户快速了解项目的状态和分支信息。 参数分类及解释 基本参数 [--current-branch]: 可选，仅考虑已检出的分支。 示例: repo overview --current-branch [<project>...]: 可选，指定…...
【设计模式】深入理解Python中的抽象工厂设计模式
深入理解Python中的抽象工厂设计模式 设计模式是软件开发中解决常见问题的经典方案，而**抽象工厂模式（Abstract Factory Pattern）**是其中非常重要的一种创建型模式。抽象工厂模式的主要作用是提供一个接口，创建一系列相关或依赖…...
网站建设完成后，多久需要升级迭代一次
网站建设完成后，一般每隔几个月就会进行一次迭代升级。以下是关于网站迭代周期和原因的具体分析： 更新频率：网站在建设完成后，一般每隔几个月就会进行一次迭代升级。这种周期性的更新有助于保持网站的现代感和竞争力。更新目的&a…...
一个整型数组里除了两个数字之外，其他的数字都出现了两次。请写程序找出这两个只出现一次的数字
这里写目录标题 问题详情分析问题代码展示 问题详情 剑指 Offer 56： 一个整型数组 nums 里除两个数字之外，其他数字都出现了两次。请写程序找出这两个只出现一次的数字。要求时间复杂度是O(n)，空间复杂度是O(1)。 示例： 输入&a…...
Vue基本学习2
Vue使用方法 <script src"js/vue.js"></script><script>/*** Mode1:数据模型，负责数据存储(后台业务逻辑/数据库)* View:视图层，负责页面展示(HTML)* View Model(Vue):负责业务逻辑处理(比如Ajax请求等)* view 与 Model 数…...
创作者等级权益说明
创作者等级权益说明 一、如何查看创作者等级权益二、等级权益对照表 一、如何查看创作者等级权益 step1：鼠标移动至头像，显示如下图的浮窗 step2：点击我的等级，即跳转到创作者等级权益页面 图1.1 我的等级 图1.2 创作者等级权益…...
基于SpringBoot+Vue+uniapp微信小程序的校园反诈骗微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念，提供了一套默认的配置，让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…...
统一修改UI库样式的几种方式
统一修改element组件库样式的几种方式。主题 | Element Plus 通过css变量设置 【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式:root {--hc-text-color-placeholder: #5f84a2;--hc-text-color-regular: #fff;--hc-text-color-primary: #fff;--hc-bg-c…...
ICM20948 DMP代码详解（88）
接前一篇文章：ICM20948 DMP代码详解（87） 本回继续对inv_convert_androidSensor_to_control函数进行解析。为了便于理解和回顾，再次贴出inv_convert_androidSensor_to_control函数源码，在EMD-Core\sources\Invn\Devices\Drivers\ICM20948\Icm20948DataBaseControl.c中，如下…...
字节跳动实习生投毒自家大模型细节曝光 影响到底有多大？
10月19日，字节跳动大模型训练遭实习生攻击一事引发广泛关注。据多位知情人士透露，字节跳动某技术团队在今年6月遭遇了一起内部技术袭击事件，一名实习生因对团队资源分配不满，使用攻击代码破坏了团队的模型训练任务。 据悉…...
【路径规划】蚁群算法优化bp神经网络回归预测
摘要 本文提出了一种基于蚁群算法（ACO）优化 BP 神经网络的回归预测方法，用于路径规划中的预测问题。通过蚁群算法优化神经网络的初始权值和阈值，提高了神经网络的训练效率和预测精度。实验结果表明，该方法能够有效提升…...
如何在OceanBase中新增系统变量及应用实践
因为系统变量涉及复杂的工程文件，为防止新增变量操作对软件系统的潜在影响，OceanBase为多数开发者设计了一套高效的编程框架。此框架允许开发者在新增及使用系统变量时，仅需专注于变量定义的细节。具体来说，通过运行一个Python脚本…...
Olap数据处理
一、OLAP 是什么 1. OLAP的定义 OLAP（Online Analytical Processing，联机分析处理）是一种软件技术，它主要专注于复杂的分析操作，帮助分析人员、管理人员或执行人员从多角度对信息进行快速、一致、交互地存取…...
Tailwind Starter Kit 一款极简的前端快速启动模板
Tailwind Starter Kit 是基于TailwindCSS实现的一款开源的、使用简单的极简模板扩展。会用Tailwincss就可以快速入手使用。Tailwind Starter Kit 是免费开源的。它不会在原始的TailwindCSS框架中更改或添加任何CSS。它具有多个HTML元素，并附带了ReactJS、Vue和Angul…...
物联网智能家居环境监测系统
作为物联网工程专业的学生，做一个智能家居非常重要，大家是这个专业的同学可以了解一下，不是这个专业的同学也可以了解一下，毕设可以参考哦。 稍微简单的了解（仅对代码可以自己写的同学） 对于一个零基础的物…...
ClawdBot部署全流程：从安装到设备授权，手把手带你跑通
ClawdBot部署全流程：从安装到设备授权，手把手带你跑通 1. ClawdBot简介与核心价值 ClawdBot是一个可以在本地设备上运行的个人AI助手，它使用vLLM提供后端模型能力。与常见的云端AI服务不同，ClawdBot的设计理念强调： …...
SEO 搜索引擎公司如何提高网站的流量
SEO 搜索引擎公司如何提高网站的流量 在当今互联网时代，网站的流量直接影响着企业的品牌知名度和市场竞争力。对于许多企业来说，SEO（搜索引擎优化）成为了提升网站流量的关键途径。SEO 搜索引擎公司究竟如何有效提高网站的流量呢&…...
告别景深烦恼：用PyTorch+PyQt5打造你的专属多焦点图像融合桌面工具（附完整源码）
告别景深烦恼：用PyTorchPyQt5打造你的专属多焦点图像融合桌面工具 每次拍摄微距或静物时，是否总在景深和清晰度之间纠结？按下快门后才发现前景清晰时背景模糊，背景聚焦时前景又失焦。专业摄影师会告诉你：这是光学镜头的…...
SEO_网站SEO优化完整教程：从入门到精通
SEO优化入门：从零基础到实战操作 随着互联网的迅猛发展，网站SEO优化成为了网站推广的重要手段。SEO，即搜索引擎优化，是通过优化网站的各项因素，使其在搜索引擎中获得更好的排名，从而吸引更多的流量。如何从…...
OpenClaw性能优化指南：千问3.5-35B-A3B-FP8长任务处理技巧
OpenClaw性能优化指南：千问3.5-35B-A3B-FP8长任务处理技巧 1. 长任务处理的痛点与优化思路 当我第一次尝试用OpenClaw对接千问3.5-35B-A3B-FP8模型处理复杂多模态任务时，遇到了几个典型问题：一个包含20张产品图片的分析任务，运行…...
告别手动备份！用Power Automate Desktop自动备份桌面重要文件并生成日志
告别手动备份！用Power Automate Desktop打造智能文件备份系统 每天下班前，你是否会习惯性地将桌面上的重要文件拖拽到U盘或移动硬盘？这种重复性操作不仅耗时耗力，还容易因疏忽导致文件遗漏。更糟糕的是，当系统崩溃或误…...
Spotless许可证头管理终极指南：如何自动化年份更新与版权保护
Spotless许可证头管理终极指南：如何自动化年份更新与版权保护 【免费下载链接】spotless Keep your code spotless 项目地址: https://gitcode.com/gh_mirrors/sp/spotless Spotless是一款强大的代码格式化工具，能够帮助开发者自动管理许可证头&a…...
跨平台文件同步：OpenClaw+百川2-13B-4bits量化模型智能归档方案
跨平台文件同步：OpenClaw百川2-13B-4bits量化模型智能归档方案 1. 为什么需要智能文件归档 作为一个长期在多台设备间切换工作的开发者，我的文件管理一直处于混乱状态。同一份文档可能同时存在于Mac的Downloads文件夹、Windows桌面的"临时"目…...
Leaflet 结合 leaflet-velocity 实现动态风场可视化的实战指南
1. 从零开始搭建风场可视化环境 第一次接触风场可视化时，我被那些动态流动的粒子效果深深吸引。作为Web地图开发中最酷炫的效果之一，用Leaflet实现风场展示其实比你想象的简单得多。我们先从最基础的环境搭建说起。 我推荐使用VSCode作为开发工具&#x…...
ILI9163C SPI TFT驱动库深度解析与嵌入式优化实践
1. TFT_ILI9163C 驱动库深度解析：面向嵌入式系统的高性能SPI TFT显示方案1.1 项目定位与工程价值TFT_ILI9163C 是一款专为嵌入式平台优化的高性能 SPI TFT 显示驱动库，核心目标是在资源受限的微控制器上实现接近硬件极限的图形刷新吞吐量。其设计哲学并非…...