29 旋转工具箱

若冰说2024-01-16 23:17

效果演示

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

Code

html 复制代码 
<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>
css 复制代码 
* {
    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";
}

实现思路拆分

css 复制代码 
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

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

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

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

css 复制代码 
.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属性来设置阴影效果。当鼠标悬停在菜单按钮上时，菜单按钮的样式会发生变化。

css 复制代码 
.btn i {
  font-size: 32px;
}

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

css 复制代码 
.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属性来设置过渡效果。当鼠标悬停在菜单按钮上时，小圆圈的位置会发生变化。

css 复制代码 
.menu:hover.btn {
  transform: rotate(315deg);
}

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

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

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

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

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

css 复制代码 
.menu span:hover i {
  color: #f51760;
}

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

css 复制代码 
@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。

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

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

css 复制代码 
.icon-add:before {
  content: "\e60c";
}

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

css 复制代码 
.icon-home:before {
  content: "\e604";
}

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

css 复制代码 
.icon-more:before {
  content: "\e606";
}

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

css 复制代码 
.icon-gift:before {
  content: "\e611";
}

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

css 复制代码 
.icon-setting:before {
  content: "\e612";
}

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

css 复制代码 
.icon-message:before {
  content: "\e613";
}

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

css 复制代码 
.icon-star:before {
  content: "\e618";
}

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

css 复制代码 
.icon-cart:before {
    content: "\e61d";
}

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

css 复制代码 
.icon-money:before {
    content: "\e61e";
}

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

相关推荐
guokanglun6 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan36 分钟前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记42 分钟前
前端：HTML （学习笔记）【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
Json_181790144802 小时前
电商拍立淘按图搜索API接口系列，文档说明参考
前端·数据库
风尚云网2 小时前
风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02042 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing2 小时前
React核心功能详解（一）
前端·react.js·前端框架
捂月2 小时前
Spring Boot 深度解析：快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能，觊觎（Edge）浏览器的内置截（长）图功能
前端·edge
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作