当前位置: 首页 > news >正文

css实现图片绕中心旋转,鼠标悬浮按钮炫酷展示

 vue模板中代码

<div class="contentBox clearfix home"><div class="circle"><img class="in-circle" src="../../assets/img/in-circle.png" alt=""><img class="out-circle" src="../../assets/img/out-circle.png" alt=""><div><img src="../../assets/img/hbsztda.png" alt=""></div></div><div class="leftAndRight left-wing"><div class="left-1"  @click="goPath(ztList[0])" style="color: #fff">{{ ztList[0].name }}</div><div class="left-2"  @click="goPath(ztList[1])">{{ ztList[1].name }}</div><div class="left-3"  @click="goPath(ztList[2])">{{ ztList[2].name }}</div><div class="left-4"  @click="goPath(ztList[3])">{{ ztList[3].name }}</div><div class="left-5"  @click="goPath(ztList[4])">{{ ztList[4].name }}</div></div><div class="leftAndRight right-wing"><div class="right-1"  @click="goPath(ztList[5])">{{ ztList[5].name }}</div><div class="right-2"  @click="goPath(ztList[6])">{{ ztList[6].name }}</div><div class="right-3"  @click="goPath(ztList[7])">{{ ztList[7].name }}</div><div class="right-4"  @click="goPath(ztList[8])">{{ ztList[8].name }}</div><div class="right-5"  @click="goPath(ztList[9])">{{ ztList[9].name }}</div></div>
</div>

 css代码

.home {width: 100vw;height: 100%;background: #000F17;position: relative;display: flex;justify-content: center;align-items: center;.circle {width: 505px;height: 505px;max-width: 100%;max-height: 100%;text-align: center;background-size: 100% 100%;color: #FFFFFF;font-size: 40px;font-family: Microsoft YaHei UI, Microsoft YaHei UI;font-weight: 400;position: relative;display: grid;place-items: center;.in-circle {width: 400px;height: 400px;position: absolute;transition: 0.5s;transform-origin: center center;  animation: rotation 10s linear infinite;}@-webkit-keyframes rotation{from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);}}.out-circle {width: 100%;height: 100%;position: absolute;transition: 0.5s;transform-origin: center center;  animation: rotateImg 10s linear infinite;}@-webkit-keyframes rotateImg{from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(-360deg);}}div {margin: auto;}}.leftAndRight {width: 35vw;height: 80vh;position: absolute;top: 50%;transform: translateY(-50%);font-size: 24px;color: #FFFFFF;display: flex;flex-direction: column;justify-content: space-around;}.left-wing {left: 0;background: url('../../assets/img/left.png') no-repeat;background-position: right;background-size: auto 100%;text-align: right;}.right-wing {right: 0;background: url('../../assets/img/right.png') no-repeat;background-size: auto 100%;align-items: flex-end;}.left-1,.left-2, .left-3,.left-4,.left-5 {width: 22vw;height: 8vh;line-height: 8vh;text-align: center;box-sizing: border-box;border: 0.5px solid #D8D8D8;cursor: pointer;color: #fff;background-color: plum;background-color:#bb65c3;border: none;transition: all 0.3s ease-in-out;filter: hue-rotate(calc(4.6 * 137deg));}.left-1 {margin-left: 10%;}.left-2 {margin-left: 17%;}.left-3 {margin-left: 25%;}.left-4 {margin-left: 17%;}.left-5 {margin-left: 10%;}.left-1::before,.left-1::after,.left-2::before,.left-2::after,.left-3::before,.left-3::after,.left-4::before,.left-4::after,.left-5::before,.left-5::after,.right-1::before,.right-1::after,.right-2::before,.right-2::after,.right-3::before,.right-3::after,.right-4::before,.right-4::after,.right-5::before,.right-5::after {/* 将两个伪元素的相同部分写在一起 */content: "";position: absolute;width: 20px;height: 20px;border: 2px solid plum;/* 动画过渡 最后的0.3s是延迟时间 */transition: all 0.3s ease-in-out 0.3s;}.left-1::before,.left-2::before,.left-3::before,.left-4::before,.left-5::before,.right-1::before,.right-2::before,.right-3::before,.right-4::before,.right-5::before {top: 0;left: 0;/* 删除左边元素的右、下边框 */border-right: 0;border-bottom: 0;}.left-1::after,.left-2::after,.left-3::after,.left-4::after,.left-5::after,.right-1::after,.right-2::after,.right-3::after,.right-4::after,.right-5::after {bottom: 0;right: 0;/* 删除右边元素的左、上边框 */border-top: 0;border-left: 0;}.left-1:hover,.left-2:hover,.left-3:hover,.left-4:hover,.left-5:hover,.right-1:hover,.right-2:hover,.right-3:hover,.right-4:hover,.right-5:hover {background-color: plum;// color: #000;/* 发光效果和倒影 */box-shadow: 0 0 50px plum;/* below是下倒影 1px是倒影的元素相隔的距离 最后是个渐变颜色 */-webkit-box-reflect: below 1px linear-gradient(transparent,rgba(0,0,0,0.3));/* 设置以上属性的延迟时间 */// transition-delay: 0.4s;background-color:#bb65c3;border: none;}.left-1:hover::before,.left-1:hover::after,.left-2:hover::before,.left-2:hover::after,.left-3:hover::before,.left-3:hover::after,.left-4:hover::before,.left-4:hover::after,.left-5:hover::before,.left-5:hover::after,.right-1:hover::before,.right-1:hover::after,.right-2:hover::before,.right-2:hover::after,.right-3:hover::before,.right-3:hover::after,.right-4:hover::before,.right-4:hover::after,.right-5:hover::before,.right-5:hover::after {width: 60%;height: 60%;transition-delay: 0s;}.right-1,.right-2, .right-3,.right-4,.right-5 {width: 22vw;height: 8vh;line-height: 8vh;text-align: center;box-sizing: border-box;cursor: pointer;color: #fff;background-color: plum;background-color:#bb65c3;border: none;transition: all 0.3s ease-in-out;filter: hue-rotate(calc(4.6 * 137deg));}.right-1 {margin-right: 10%;}.right-2 {margin-right: 17%;}.right-3 {margin-right: 25%;}.right-4 {margin-right: 17%;}.right-5 {margin-right: 10%;}}@media screen and (max-width:1600px){.home .circle{font-size: 28px;width: 385px;height: 385px;line-height: 385px;.in-circle {width: 300px;height: 300px;}}.home .leftAndRight {font-size: 22px;}}@media screen and (max-width:1366px){.home .circle{width: 205px;height: 205px;line-height: 205px;font-size: 26px;.in-circle {width: 200px;height: 200px;}}.home .leftAndRight {font-size: 20px;}}

运行效果

相关文章:

css实现图片绕中心旋转,鼠标悬浮按钮炫酷展示

vue模板中代码 <div class"contentBox clearfix home"><div class"circle"><img class"in-circle" src"../../assets/img/in-circle.png" alt""><img class"out-circle" src"../../as…...

C++11的线程

线程的创建 用std::thread创建线程非常简单&#xff0c;只需要提供线程函数或者线程对象即可&#xff0c;并可以同时指定线程函数的参数。下面是创建线程的示例&#xff1a; #include <thread> #include <iostream> using namespace std;void func() {cout <<…...

Deepmind开发音频模型Lyria 用于生成高品质音乐;创建亚马逊新产品评论摘要

&#x1f989; AI新闻 &#x1f680; Deepmind开发音频模型Lyria 用于生成高品质音乐 摘要&#xff1a;Deepmind推出名为Lyria的音频模型&#xff0c;可生成带有乐器和人声的高品质音乐。Lyria模型针对音乐生成的挑战&#xff0c;解决了音乐信息密度高、音乐序列中的连续性维…...

Liunx系统使用超详细(一)

目录 一、Liunx系统的认识 二、Liunx和Windows区别 三、Liunx命令提示符介绍 四、Liunx目录结构 一、Liunx系统的认识 Linux系统是一种开源的、类Unix操作系统内核的实现&#xff0c;它基于Unix的设计原理和思想&#xff0c;并在全球范围内广泛应用。以下是对Linux系统的详…...

C语言标准

1、概述 C语言标准是由ANSI&#xff08;美国国家标准协会&#xff09;和ISO&#xff08;国际标准化组织&#xff09;共同制定的一种语言规范。标准经历过如下更新&#xff1a; C89/C90标准C99标准C11标准C17标准 2、C89/C90标准 (1)这是1989年正式发布的C语言标准&#xff0…...

TI 毫米波雷达开发系列之mmWave Studio 和 Visuiallizer 的异同点雷达影响因素分析

TI 毫米波雷达开发之mmWave Studio 和 Visuiallizer 的异同点 引入整个雷达系统研究的目标分析影响这个目标的因素硬件影响因素 —— 雷达系统的硬件结构&#xff08;主要是雷达收发机&#xff09;AWR1642芯片硬件系统组成MSS 和 DSS 概述MSS 和 DSS 分工BSS的分工AWR1642 组成…...

SpringBoot事务处理

一、事务回顾 回顾地址&#xff1a; 深入理解数据库事务&#xff08;超详细&#xff09;_数据库事务操作_Maiko Star的博客-CSDN博客 事务&#xff1a; 是一组操作的集合&#xff0c;是一个不可分割的工作单位&#xff0c;这些操作要么同时成功&#xff0c;要么同时失败 事…...

网络安全—自学

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…...

首页以卡片形式来展示区块链列表数据(Web3项目一实战之五)

我们已然在 Web3 分布式存储 IPFS(Web3项目一实战之四) 介绍了什么是IPFS,以及在本地电脑如何安装它。虽然在上一篇讲解了该怎么安装IPFS,也做了相应的配置,但在本地开发阶段,前端总是无法避免跨域这个远程请求api的”家常便饭的通病“。 很显然,对于出现跨域这类常见问…...

opencv使用pyinstaller打包错误:‘can‘t find starting number (in the name of file)

使用Python语言和opencv模块在pycharm中编辑的代码运行没问题&#xff0c;但是在使用pyinstaller打包后出现错误can‘t find starting number (in the name of file) [ERROR:0] global C:\Users\runneradmin\AppData\Local\Temp\pip-req-build-q3d_8t8e\opencv\modules\videoi…...

4.一维数组——用数组处理求Fibonacci数列前20项

文章目录 前言一、题目描述 二、题目分析 三、解题 程序运行代码 四、结果显示 前言 本系列为一维数组编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 用数组处理求Fibonacci数列前20项 二、题目分析 前两项&#xff1a;f[20]{1,1} 后18项&#xff1a;for(…...

讯飞星火知识库文档问答Web API的使用(二)

上一篇提到过星火spark大模型&#xff0c;现在有更新到3.0&#xff1a; 给ChuanhuChatGPT 配上讯飞星火spark大模型V2.0&#xff08;一&#xff09; 同时又看到有知识库问答的web api&#xff0c;于是就测试了一下。 下一篇是在ChuanhuChatGPT 中单独写一个基于星火知识库的内容…...

第十三章 深度解读预训练与微调迁移,模型冻结与解冻(工具)

一个完整的代码 pythonCopy codeimport torch import torchvision import torchvision.transforms as transforms import torch.nn as nn import torch.optim as optim # 设置设备&#xff08;CPU或GPU&#xff09; device torch.device("cuda" if torch.cuda.is_a…...

tinyViT论文笔记

论文&#xff1a;https://arxiv.org/abs/2207.10666 GitHub&#xff1a;https://github.com/microsoft/Cream/tree/main/TinyViT 摘要 在计算机视觉任务中&#xff0c;视觉ViT由于其优秀的模型能力已经引起了极大关注。但是&#xff0c;由于大多数ViT模型的参数量巨大&#x…...

解决ssh -T git@github.com报错connection closed问题

解决ssh -T gitgithub.com报错connection closed问题 问题解决 问题 $ ssh -T gitgithub.com kex_exchange_identification: Connection closed by remote host Connection closed by 20.205.243.166 port 22解决 参考链接 $ ssh -T -p 443 gitssh.github.com...

新手如何购买保险,保险投资基础入门

一、教程描述 本套保险教程&#xff0c;大小2.63G&#xff0c;共有11个文件。 二、教程目录 第01课 保险到底有什么用.mp4 第02课 已有社保还需要商业保险吗.mp4 第03课 你必须要懂的保险基础知识.mp4 第04课 关于重疾你必须要知道的几件事情.mp4 第05课 家庭重疾险如何…...

基于springboot网上超市管理系统

基于springboot网上超市管理系统 摘要 随着互联网的快速发展&#xff0c;电子商务行业迎来了蓬勃的发展&#xff0c;网上超市作为电子商务的一种形式&#xff0c;为消费者提供了便利的购物体验。本文基于Spring Boot框架&#xff0c;设计和实现了一个网上超市管理系统&#xff…...

FlagEmbedding目前最好的sentence编码工具

FlagEmbedding专注于检索增强llm领域&#xff0c;目前包括以下项目: Fine-tuning of LM : LM-Cocktail Dense Retrieval: LLM Embedder, BGE Embedding, C-MTEB Reranker Model: BGE Reranker 更新 11/23/2023: Release LM-Cocktail, 一种通过模型融合在微调时保持原有模型通用…...

rabbitMQ发布确认-交换机不存在或者无法抵达队列的缓存处理

rabbitMQ在发送消息时&#xff0c;会出现交换机不存在&#xff08;交换机名字写错等消息&#xff09;&#xff0c;这种情况如何会退给生产者重新处理&#xff1f;【交换机层】 生产者发送消息时&#xff0c;消息未送达到指定的队列&#xff0c;如何消息回退&#xff1f; 核心&…...

STM32 MAP文件

文章目录 1 生成Map2 map中概念3 文件分析流程3.1 Section Cross References3.2 Removing Unused input sections from the image&#xff08;移除未使用的段&#xff09;3.3 Image Symbol Table 映像符号表3.4 Memory Map of the image&#xff08;映像的内存分布&#xff09;…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...