视频效果:
环形菜单
思路讲解 :首先我们创建一定数量的li同时使用定位改变其位置,当鼠标悬浮上去的时候,将不同的li旋转不同的角度从而形成一个旋转菜单的效果,scale主要是为了将所有的li都隐藏起,这个效果可以直接加在ul上,且要发生在li旋转之前,不然可能会出现,li已经旋转完毕再浮现出来的效果
代码及细节:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>环形菜单</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
background-color: #2c3e50;
display: flex;
justify-content: center;
align-items: center;
}
div{
width: 100px;
height: 100px;
background-color: #8e44ad;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
text-align: center;
position: relative;
}
div::before{
content: "莞工杰仔";
color: #3498db;
opacity: 0.6;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
ul{
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
transform: scale(0);
}
div:hover ul{
transform: scale(1);
}
li{
list-style: none;
width: 50px;
height: 50px;
background-color: #e74c3c;
text-align: center;
line-height: 50px;
border-radius: 50%;
position: absolute;
left: 0px;
/* 改变变形原点 */
transform-origin: 100px 100px;
transition: 2s;
}
ul:hover {
transform: scale(1);
}
ul:hover li:nth-child(1){
transform: rotate(360deg);
}
ul:hover li:nth-child(2){
transform: rotate(320deg);
}
ul:hover li:nth-child(3){
transform: rotate(280deg);
}
ul:hover li:nth-child(4){
transform: rotate(240deg);
}
ul:hover li:nth-child(5){
transform: rotate(200deg);
}
ul:hover li:nth-child(6){
transform: rotate(160deg);
}
ul:hover li:nth-child(7){
transform: rotate(120deg);
}
ul:hover li:nth-child(8){
transform: rotate(80deg);
}
ul:hover li:nth-child(9){
transform: rotate(40deg);
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</body>
</html>
总结要掌握的知识点:
1.transform:scale();
2.transform:rotate();
3.transform-origin