效果演示
实现了一个菜单按钮的动画效果,当鼠标悬停在菜单按钮上时,菜单按钮会旋转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",这个编码是阿里巴巴的图标库中的一个图标的编码。