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创建线程非常简单,只需要提供线程函数或者线程对象即可,并可以同时指定线程函数的参数。下面是创建线程的示例: #include <thread> #include <iostream> using namespace std;void func() {cout <<…...
Deepmind开发音频模型Lyria 用于生成高品质音乐;创建亚马逊新产品评论摘要
🦉 AI新闻 🚀 Deepmind开发音频模型Lyria 用于生成高品质音乐 摘要:Deepmind推出名为Lyria的音频模型,可生成带有乐器和人声的高品质音乐。Lyria模型针对音乐生成的挑战,解决了音乐信息密度高、音乐序列中的连续性维…...
Liunx系统使用超详细(一)
目录 一、Liunx系统的认识 二、Liunx和Windows区别 三、Liunx命令提示符介绍 四、Liunx目录结构 一、Liunx系统的认识 Linux系统是一种开源的、类Unix操作系统内核的实现,它基于Unix的设计原理和思想,并在全球范围内广泛应用。以下是对Linux系统的详…...
C语言标准
1、概述 C语言标准是由ANSI(美国国家标准协会)和ISO(国际标准化组织)共同制定的一种语言规范。标准经历过如下更新: C89/C90标准C99标准C11标准C17标准 2、C89/C90标准 (1)这是1989年正式发布的C语言标准࿰…...
TI 毫米波雷达开发系列之mmWave Studio 和 Visuiallizer 的异同点雷达影响因素分析
TI 毫米波雷达开发之mmWave Studio 和 Visuiallizer 的异同点 引入整个雷达系统研究的目标分析影响这个目标的因素硬件影响因素 —— 雷达系统的硬件结构(主要是雷达收发机)AWR1642芯片硬件系统组成MSS 和 DSS 概述MSS 和 DSS 分工BSS的分工AWR1642 组成…...
SpringBoot事务处理
一、事务回顾 回顾地址: 深入理解数据库事务(超详细)_数据库事务操作_Maiko Star的博客-CSDN博客 事务: 是一组操作的集合,是一个不可分割的工作单位,这些操作要么同时成功,要么同时失败 事…...
网络安全—自学
1.网络安全是什么 网络安全可以基于攻击和防御视角来分类,我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术,而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高; 二、则是发展相对成熟…...
首页以卡片形式来展示区块链列表数据(Web3项目一实战之五)
我们已然在 Web3 分布式存储 IPFS(Web3项目一实战之四) 介绍了什么是IPFS,以及在本地电脑如何安装它。虽然在上一篇讲解了该怎么安装IPFS,也做了相应的配置,但在本地开发阶段,前端总是无法避免跨域这个远程请求api的”家常便饭的通病“。 很显然,对于出现跨域这类常见问…...
opencv使用pyinstaller打包错误:‘can‘t find starting number (in the name of file)
使用Python语言和opencv模块在pycharm中编辑的代码运行没问题,但是在使用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项
文章目录 前言一、题目描述 二、题目分析 三、解题 程序运行代码 四、结果显示 前言 本系列为一维数组编程题,点滴成长,一起逆袭。 一、题目描述 用数组处理求Fibonacci数列前20项 二、题目分析 前两项:f[20]{1,1} 后18项:for(…...
讯飞星火知识库文档问答Web API的使用(二)
上一篇提到过星火spark大模型,现在有更新到3.0: 给ChuanhuChatGPT 配上讯飞星火spark大模型V2.0(一) 同时又看到有知识库问答的web api,于是就测试了一下。 下一篇是在ChuanhuChatGPT 中单独写一个基于星火知识库的内容…...
第十三章 深度解读预训练与微调迁移,模型冻结与解冻(工具)
一个完整的代码 pythonCopy codeimport torch import torchvision import torchvision.transforms as transforms import torch.nn as nn import torch.optim as optim # 设置设备(CPU或GPU) device torch.device("cuda" if torch.cuda.is_a…...
tinyViT论文笔记
论文:https://arxiv.org/abs/2207.10666 GitHub:https://github.com/microsoft/Cream/tree/main/TinyViT 摘要 在计算机视觉任务中,视觉ViT由于其优秀的模型能力已经引起了极大关注。但是,由于大多数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...
新手如何购买保险,保险投资基础入门
一、教程描述 本套保险教程,大小2.63G,共有11个文件。 二、教程目录 第01课 保险到底有什么用.mp4 第02课 已有社保还需要商业保险吗.mp4 第03课 你必须要懂的保险基础知识.mp4 第04课 关于重疾你必须要知道的几件事情.mp4 第05课 家庭重疾险如何…...
基于springboot网上超市管理系统
基于springboot网上超市管理系统 摘要 随着互联网的快速发展,电子商务行业迎来了蓬勃的发展,网上超市作为电子商务的一种形式,为消费者提供了便利的购物体验。本文基于Spring Boot框架,设计和实现了一个网上超市管理系统ÿ…...
FlagEmbedding目前最好的sentence编码工具
FlagEmbedding专注于检索增强llm领域,目前包括以下项目: 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在发送消息时,会出现交换机不存在(交换机名字写错等消息),这种情况如何会退给生产者重新处理?【交换机层】 生产者发送消息时,消息未送达到指定的队列,如何消息回退? 核心&…...
STM32 MAP文件
文章目录 1 生成Map2 map中概念3 文件分析流程3.1 Section Cross References3.2 Removing Unused input sections from the image(移除未使用的段)3.3 Image Symbol Table 映像符号表3.4 Memory Map of the image(映像的内存分布)…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
PHP和Node.js哪个更爽?
先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
为什么要创建 Vue 实例
核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...
解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域,无损检测(NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统,以非接触式光学麦克风技术为核心,打破传统检测瓶颈,为半导体、航空航天、汽车制造等行业提供了高灵敏…...
什么是VR全景技术
VR全景技术,全称为虚拟现实全景技术,是通过计算机图像模拟生成三维空间中的虚拟世界,使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验,结合图文、3D、音视频等多媒体元素…...
