29 旋转工具箱

效果演示

在这里插入图片描述

实现了一个菜单按钮的动画效果，当鼠标悬停在菜单按钮上时，菜单按钮会旋转315度，菜单按钮旋转的同时，菜单按钮旋转的8个小圆圈也会依次旋转360度，并且每个小圆圈的旋转方向和菜单按钮的旋转方向相反，当鼠标悬停在某个小圆圈上时，该小圆圈的旋转方向会变为顺时针旋转360度。整个效果看起来像是一只小鸟在飞翔，菜单按钮像是它的翅膀，菜单按钮旋转的同时，小圆圈也在飞翔。此外，这段代码还定义了一些自定义的图标，并使用了阿里巴巴的图标库。

Code

<div class="menu">
    <div class="btn"><i class="iconfont icon-add"></i></div>
    <span style="--i: 0;"><i class="iconfont icon-home"></i></span>
    <span style="--i: 1;"><i class="iconfont icon-more"></i></span>
    <span style="--i: 2;"><i class="iconfont icon-gift"></i></span>
    <span style="--i: 3;"><i class="iconfont icon-setting"></i></span>
    <span style="--i: 4;"><i class="iconfont icon-message"></i></span>
    <span style="--i: 5;"><i class="iconfont icon-cart"></i></span>
    <span style="--i: 6;"><i class="iconfont icon-money"></i></span>
    <span style="--i: 7;"><i class="iconfont icon-star"></i></span>
</div>

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e8e8e8;
}

.menu {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn {
    position: absolute;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 50%;
    z-index: 1000;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 1.25s;
}

.btn i {
    font-size: 32px;
}

.menu span {
    position: absolute;
    left: 0;
    transform-origin: 100px;
    transition: .5s;
    transition-delay: calc(.1s * var(--i));
    transform: rotate(0deg) translateX(80px);
    width: 40px;
    height: 40px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
}

.menu:hover .btn {
    transform: rotate(315deg);
}

.menu:hover span {
    transform: rotate(calc(360deg / 8 * var(--i)));
}

.menu span i {
    transform: rotate(calc(360deg / -8 * var(--i)));
}

.menu span:hover i {
    color: #f51760;
}

@font-face {
    font-family: "iconfont";
    /* Project id 4090357 */
    src: url('//at.alicdn.com/t/c/font_4090357_z2qpnic06um.woff2?t=1685189584312') format('woff2'),
        url('//at.alicdn.com/t/c/font_4090357_z2qpnic06um.woff?t=1685189584312') format('woff'),
        url('//at.alicdn.com/t/c/font_4090357_z2qpnic06um.ttf?t=1685189584312') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-add:before {
    content: "\e60c";
}

.icon-home:before {
    content: "\e604";
}

.icon-more:before {
    content: "\e606";
}

.icon-gift:before {
    content: "\e611";
}

.icon-setting:before {
    content: "\e612";
}

.icon-message:before {
    content: "\e613";
}

.icon-star:before {
    content: "\e618";
}

.icon-cart:before {
    content: "\e61d";
}

.icon-money:before {
    content: "\e61e";
}

实现思路拆分

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

这段代码是设置全局样式，将所有元素的外边距、内边距和列表样式都设置为0，并将列表样式设置为none。

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e8e8e8;
}

这段代码是设置页面的基本样式，将页面的高度设置为100vh，并将页面的内容居中对齐。同时，将页面的背景颜色设置为#e8e8e8。

.menu {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

这段代码是设置菜单按钮的样式，将菜单按钮的位置设置为相对定位，宽度和高度都设置为200px，并将菜单按钮的内容居中对齐。

.btn {
  position: absolute;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 50%;
  z-index: 1000;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 1.25s;
}

这段代码是设置菜单按钮的样式，将菜单按钮的位置设置为绝对定位，宽度和高度都设置为60px，并将菜单按钮的内容居中对齐。同时，将菜单按钮的背景颜色设置为白色，边框半径设置为50%，并添加了一个box-shadow属性来设置阴影效果。当鼠标悬停在菜单按钮上时，菜单按钮的样式会发生变化。

.btn i {
  font-size: 32px;
}

这段代码是设置菜单按钮的图标样式，将菜单按钮的字体大小设置为32px。

.menu span {
  position: absolute;
  left: 0;
  transform-origin: 100px;
  transition:.5s;
  transition-delay: calc(.1s * var(--i));
  transform: rotate(0deg) translateX(80px);
  width: 40px;
  height: 40px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
}

这段代码是设置菜单按钮旋转的小圆圈的样式，将小圆圈的位置设置为绝对定位，左边距设置为0，将小圆圈的旋转中心设置为100px，并添加了一个transition属性来设置过渡效果。当鼠标悬停在菜单按钮上时，小圆圈的位置会发生变化。

.menu:hover.btn {
  transform: rotate(315deg);
}

这段代码是设置鼠标悬停在菜单按钮上时的样式，将菜单按钮旋转315度。

.menu:hover span {
  transform: rotate(calc(360deg / 8 * var(--i)));
}

这段代码是设置鼠标悬停在菜单按钮上时，小圆圈的旋转效果。

.menu span i {
  transform: rotate(calc(360deg / -8 * var(--i)));
}

这段代码是设置小圆圈的旋转效果，将小圆圈的旋转方向设置为与菜单按钮的旋转方向相反。

.menu span:hover i {
  color: #f51760;
}

这段代码是设置鼠标悬停在小圆圈上时的样式，将小圆圈的颜色设置为#f51760。

@font-face {
  font-family: "iconfont";
  /* Project id 4090357 */
  src: url('//at.alicdn.com/t/c/font_4090357_z2qpnic06um.woff2?t=1685189584312') format('woff2'),
    url('//at.alicdn.com/t/c/font_4090357_z2qpnic06um.woff?t=1685189584312') format('woff'),
    url('//at.alicdn.com/t/c/font_4090357_z2qpnic06um.ttf?t=1685189584312') format('truetype');
}

这段代码是定义一个字体，将字体的名称设置为"iconfont"，字体的来源设置为三个不同的格式，分别为woff2、woff和ttf。

.iconfont {
  font-family: "iconfont"!important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

这段代码是设置字体的样式，将字体的名称设置为"iconfont"，字体的大小设置为16px，字体的样式设置为普通字体，并添加了一些属性来优化字体的显示效果。

.icon-add:before {
  content: "\e60c";
}

这段代码是定义一个图标，将图标的名称设置为"icon-add"，将图标的Unicode编码设置为"\e60c"，这个编码是阿里巴巴的图标库中的一个图标的编码。

.icon-home:before {
  content: "\e604";
}

这段代码是定义一个图标，将图标的名称设置为"icon-home"，将图标的Unicode编码设置为"\e604"，这个编码是阿里巴巴的图标库中的一个图标的编码。

.icon-more:before {
  content: "\e606";
}

这段代码是定义一个图标，将图标的名称设置为"icon-more"，将图标的Unicode编码设置为"\e606"，这个编码是阿里巴巴的图标库中的一个图标的编码。

.icon-gift:before {
  content: "\e611";
}

这段代码是定义一个图标，将图标的名称设置为"icon-gift"，将图标的Unicode编码设置为"\e611"，这个编码是阿里巴巴的图标库中的一个图标的编码。

.icon-setting:before {
  content: "\e612";
}

这段代码是定义一个图标，将图标的名称设置为"icon-setting"，将图标的Unicode编码设置为"\e612"，这个编码是阿里巴巴的图标库中的一个图标的编码。

.icon-message:before {
  content: "\e613";
}

这段代码是定义一个图标，将图标的名称设置为"icon-message"，将图标的Unicode编码设置为"\e613"，这个编码是阿里巴巴的图标库中的一个图标的编码。

.icon-star:before {
  content: "\e618";
}

这段代码是定义一个图标，将图标的名称设置为"icon-star"，将图标的Unicode编码设置为"\e618"，这个编码是阿里巴巴的图标库中的一个图标的编码。

.icon-cart:before {
    content: "\e61d";
}

这段代码是定义一个图标，将图标的名称设置为"icon-cart"，将图标的Unicode编码设置为"\e61d"，这个编码是阿里巴巴的图标库中的一个图标的编码。

.icon-money:before {
    content: "\e61e";
}

这段代码是定义一个图标，将图标的名称设置为"icon-money"，将图标的Unicode编码设置为"\e61e"，这个编码是阿里巴巴的图标库中的一个图标的编码。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/327585.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【SpringMVC】常用注解（续）

【SpringMVC】常用注解（续）

在SpringMVC常用注解一文中&#xff0c;已经对一些基本注解&#xff08;有Controller、RequestMapping、ResponseBody、RequestParam&#xff09;进行了简单介绍&#xff1b;在此篇文章中&#xff0c;将继续对剩余的几个常用注解进行简单介绍&#xff0c;有RequestBody、PathVa…
阅读更多...
ElasticSearch入门篇

ElasticSearch入门篇

目录 一、 ElasticSearch的定位 二、 什么是倒排索引 三、 什么是全文检索 四、 ElasticSearch的数据存储原理 4.1 ElasticSearch与关系型数据库的数据结构对比 4.2 ElasticSearch的倒排索引原理 一、 ElasticSearch的定位 ElasticSearch是一款开源的分布式 搜索和…
阅读更多...
力扣算法之滑动窗口题目--水果成篮

力扣算法之滑动窗口题目--水果成篮

文章目录 题目解析不同之处解决办法解决图示 代码 题目解析 首先我们先看一下题目如下图所示 题目意思也比较容易理解其实就是你有一个篮子这个篮子只能装两个不同种类的水果&#xff0c;问你最多能装多少个水果&#xff0c;这里还贴心的弄了一个样列&#xff0c;121 可以看出…
阅读更多...
计算机组成原理 运输层

计算机组成原理 运输层

文章目录 运输层运输层协议概述进程之间的通信运输层的两个主要协议运输层的端口 用户数据报协议 UDPUDP 概述UDP 的首部格式 传输控制协议 TCP 概述TCP 最主要的特点TCP 的连接 可靠传输的工作原理停止等待协议连续 ARQ协议 TCP 报文段的首部格式TCP 可靠传输的实现以字节为单…
阅读更多...
tcpdump常用命令

tcpdump常用命令

tcp首部解析&#xff1a; tcp-首部_tcp首部-CSDN博客 ref&#xff1a; Home | TCPDUMP & LIBPCAP https://www.cnblogs.com/onlyforcloud/p/4396126.html tcpdump 详细使用指南&#xff08;请尽情食用&#xff09;_tcpdump指定ip和端口-CSDN博客 【博客192】抓取报文查…
阅读更多...
【深度学习目标检测】十五、基于深度学习的口罩检测系统-含GUI和源码（python，yolov8）

【深度学习目标检测】十五、基于深度学习的口罩检测系统-含GUI和源码（python，yolov8）

YOLOv8是一种物体检测算法&#xff0c;是YOLO系列算法的最新版本。 YOLO&#xff08;You Only Look Once&#xff09;是一种实时物体检测算法&#xff0c;其优势在于快速且准确的检测结果。YOLOv8在之前的版本基础上进行了一系列改进和优化&#xff0c;提高了检测速度和准确性。…
阅读更多...
八、K8S metrics-server

八、K8S metrics-server

下载yaml文件 wget https://github.com/kubernetes-sigs/metrics-server/releases/latest/download/high-availability.yaml 改名&#xff1a;mv high-availability.yaml metrics-server.yaml 查看镜像地址 查看镜像地址 grep -rn image high-availability.yaml 150: …
阅读更多...
【人工智能平台】ubuntu22.04.3部署cube-studio

【人工智能平台】ubuntu22.04.3部署cube-studio

简介&#xff1a;本次安装是在虚拟机上进行&#xff0c;需要给虚拟机至少分配16GB&#xff0c;分配8GB时系统会卡死。 一、环境&#xff1a; 主机环境&#xff1a;win11&#xff08;全程科学&#xff09;vm虚拟机 虚拟机&#xff1a;ubuntu22.04.3桌面版&#xff08;新装&…
阅读更多...
Ventoy：打造你的万能启动 U 盘 | 开源日报 No.146

Ventoy：打造你的万能启动 U 盘 | 开源日报 No.146

ventoy/Ventoy Stars: 54.3k License: GPL-3.0 Ventoy 是一个开源工具&#xff0c;用于创建支持 ISO/WIM/IMG/VHD(x)/EFI 文件的可启动 USB 驱动器。其主要功能包括将镜像文件复制到 USB 驱动器并进行引导、一次性复制多个镜像文件并提供引导菜单选择以及在本地磁盘中浏览和引…
阅读更多...
基于SSM的高校班级同学录网站的设计与实现

基于SSM的高校班级同学录网站的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…
阅读更多...
Vue组件之间的通信方式都有哪些？

Vue组件之间的通信方式都有哪些？

面试官&#xff1a;Vue组件之间的通信方式都有哪些&#xff1f; 一、组件间通信的概念 开始之前&#xff0c;我们把组件间通信这个词进行拆分 组件通信 都知道组件是vue最强大的功能之一&#xff0c;vue中每一个.vue我们都可以视之为一个组件通信指的是发送者通过某种媒体以…
阅读更多...
C#灵活的任务调度组件FluentScheduler

C#灵活的任务调度组件FluentScheduler

FluentScheduler是一个C#的灵活的任务调度组件&#xff0c;支持各类任务调度。网上有很多演示代码&#xff0c;此处记录下来&#xff0c;方便自己查找。 // See https://aka.ms/new-console-template for more information //Console.WriteLine("Hello, World!");us…
阅读更多...
Tortoise-orm 使用(一)

Tortoise-orm 使用(一)

创建表 项目基于Vue3.0, FastAPI的模板管理系统&#xff0c;从网上找了各种资源去实践&#xff0c;现在将总结发出来&#xff0c;分享给大家&#xff0c;希望帮助大家少走些弯路。 准备工作 # tortoise-orm pip install tortoise-orm # MySQL pip install tortoise-orm[async…
阅读更多...
数据库结构文档生成（通过PDMReader）

数据库结构文档生成（通过PDMReader）

将数据库的表结构生成数据库结构文档有三种方法&#xff1a; 1、通过 PDMReader生成文档&#xff1b; 2、使用EZDML 工具生成&#xff08;下载地址&#xff1a;EZDML - 下载&#xff09;&#xff1b; 3、使用SCREW 插件&#xff0c;通过java代码生成。 本文章先介绍通过PDM…
阅读更多...
ZABBIX根据IP列表,主机描述,或IP子网批量创建主机的维护任务

ZABBIX根据IP列表,主机描述,或IP子网批量创建主机的维护任务

有时候被ZABBIX监控的主机可能需要关机重启等维护操作,为了在此期间不触发告警,需要创建主机的维护任务,以免出现误告警 ZABBIX本身有这个API可供调用(不同版本细节略有不同,本次用的ZABBIX6.*),实现批量化建立主机的维护任务 无论哪种方式(IP列表,主机描述,或IP子网)创建维护…
阅读更多...
Cellinx NVT 摄像机 UAC.cgi 任意用户创建漏洞复现

Cellinx NVT 摄像机 UAC.cgi 任意用户创建漏洞复现

0x01 产品简介 Cellinx NVT IP PTZ是韩国Cellinx公司的一个摄像机设备。 0x02 漏洞概述 Cellinx NVT 摄像机 UAC.cgi接口处存在任意用户创建漏洞，未经身份认证的攻击者可利用此接口创建管理员账户，登录后台可查看敏感信息，使系统处于极不安全的状态。 0x03 复现环境 FO…
阅读更多...
Nas群晖中搭建自己的图片库

Nas群晖中搭建自己的图片库

1、在套件中心下载synology phtotos 2、点击打开&#xff0c;右上角头像设置中配置 3、这样子就是已经完成了&#xff0c;可以把你的图片进行上传 4、嫌弃上传麻烦的&#xff0c;可以直接去根目录复制粘贴 5、访问 这样子就可以直接访问了
阅读更多...
Rust-析构函数

Rust-析构函数

所谓“析构函数”(destructor),是与“构造函数”(constructor)相对应的概念。 “构造函数”是对象被创建的时候调用的函数&#xff0c;“析构函数”是对象被销毁的时候调用的函数。 Rust中没有统一的“构造函数”这个语法&#xff0c;对象的构造是直接对每个成员进行初始化完…
阅读更多...
系列十一、Spring Security登录接口兼容JSON格式登录

系列十一、Spring Security登录接口兼容JSON格式登录

一、Spring Security登录接口兼容JSON格式登录 1.1、概述 前后端分离中&#xff0c;前端和后端的数据交互通常是JSON格式&#xff0c;而Spring Security的登录接口默认支持的是form-data或者x-www-form-urlencoded的&#xff0c;如下所示&#xff1a; 那么如何让Spring Securi…
阅读更多...
面试狗面试指南系列(1/5): 做好面试需要的一切准备

面试狗面试指南系列(1/5): 做好面试需要的一切准备

面试狗&#xff0c;是一群叛逆的程序员开发的远程面试助手&#xff0c;已经帮1000朋友顺利拿到offer&#xff01; 它可以&#xff1a; 实时识别面试官语音&#xff0c;自动提取关键问题最先进的GPT4加持&#xff0c;按照方便快速阅读的方式高效组织结果&#xff0c;快速展示重…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站