CSS圆形转动实际效果 纯CSS制做圆形转动菜单实际

2021-03-10 14:46 jianzhan

大家理念中的菜单全是矩形框的,并不是横向排序便是纵向排序,这里大家摆脱了基本的逻辑思维,把菜单做成圆形的。

在这里大家迫不得已摆脱几个难题:

怎样界定html怎样悬停精准定位菜模块素

在此以前先看1下最后实际效果是如何的,DEMO放在前面关键是提升大伙儿阅读文章的兴趣爱好。

下面就让大家刚开始今日的实例教程吧

 第1步:搭建HTML

在撰写HTML以前,务必先掌握即将搭建的构造是如何的,下图表明要搭建的构造:

每一个顶部的矩形框框都与下面大圆中的1个小圆相联络,当把电脑鼠标悬停在矩形框框上时,对应的小圆转动到菜单的顶部。而完成这个作用的难点便是如何完成悬停在1个元素上从而危害另外一个元素的主要表现情况。

为处理这个难题,让大家看看下面的HTML:

拷贝编码
编码以下:

<div class="item⑴">
<a href="#">anchor</a>
</div>
<div class="item⑵">
<p>target</p>
</div>

大家期待根据电脑鼠标悬停在anchor上来更改target段落的色调,假如你对hover的远程控制实际操作有1个基础的定义,你将会会先写出下面的css编码:

拷贝编码
编码以下:

a:hover p { color: blue;}

这段编码不可以做到大家的预期实际效果,观查上面HTML编码,大家要更改色调的元素和电脑鼠标悬停的元素各自在不一样的div中,这无形中中提升了大家完成的难度,因此必须更改HTML构造以下,把两个元素各自放在同1个div下:

拷贝编码
编码以下:

<div class="item⑴"> <a href="#">anchor</a> <p>target</p></div>

把两个元素各自放在同1个div下,anchor和target做为同级元素能够开展下列实际操作

拷贝编码
编码以下:

a:hover + p { color: blue;}

以上就完成了电脑鼠标悬停在a上面,而且使紧临它的同级元素更改色调。

实际运用:

应用上面的专业知识到本实例教程实例中,大家能够想出1个可行的构造,最先建立3个嵌套循环div,各自取名class为wrapper, menu和circle.

拷贝编码
编码以下:

<div class="wrapper">
<div class="menu">
<div class="circle">
</div>
</div>
</div>

在menu div里边设定4个锚点,各自有不一样的class,在circle div里边是1个包括4个数据的ul li元素

拷贝编码
编码以下:

<div class="wrapper">
<div class="menu">
<a href="#" class="one">One</a>
<a href="#" class="two">Two</a>
<a href="#" class="three">Three</a>
<a href="#" class="four">Four</a>
<div class="circle">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>

让大家用1张照片来更清楚的了解上面所叙述的构造

第2步:wrapper div的css

上面的HTML编码此后就撰写结束,下面关键的是css的难题,最先大家界定1些基础的款式:

拷贝编码
编码以下:

* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}
/*WRAPPER*/
.wrapper {
position: relative;
margin: 20px auto;
width: 3670px;
}

第3步:circle div的css

这1步大家将界定1个大圆,用css制做圆是很简易的大家只必须把元素的宽度和高宽比设定成相同,随后把border的宽度设定成50%就可以了。更多有关运用border来建立图型的实例教程能够参看我的《建立3角形的几种不一样的方法》这篇文章内容。

拷贝编码
编码以下:

/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #093b62;
}

以便让圆看起来更漂亮,更具备立体式感,大家为其加上黑影实际效果transition,它可能在circle转动时用到。

拷贝编码
编码以下:

/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #093b62;
box-shadow: inset 0px 0px 30px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0px 0px 30px rgba(0,0,0,0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

假如大家看1看即时预览,大家应当有1个好看的大圆和1些别的各种各样分散化的元素,接下来可能对这些分散化的元素开展解决。

第4步:menu div的css

下面是对锚点(也便是这里的<a>元素),做1些款式设定和悬停实际效果:

拷贝编码
编码以下:

.menu a {
margin-right: ⑷px;
padding: 10px 30px;
width: 50px;
color: #333;
text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
background: #eee;
}

在开启预览看1些,可能比上面漂亮的多,而且悬停会出現设定的实际效果,可是ul li還是是很乱的主要表现,接下来将处理这个难题:

第5步:小圆的css

最先大家这里是用ul li来制做小圆,因此要先消除它的固有款式用list-style:none;来消除,随后制做小圆,相近与制做大圆,宽高相同,border宽度50%,随后设定情况色调和字体样式:

拷贝编码
编码以下:

/*LITTLE CIRCLES*/
.circle li {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
list-style: none;
text-align: center;
font: 20px/50px Helvetica, Arial, sans-serif;
}

下面是最艰难的一部分,为小圆精准定位,这里用肯定精准定位方法,最先大家用nth-child寻找子元素,随后各自用top、left特性来精准定位,并应用CSS的transform特性来转动小圆,便于于大圆转动时对应的小圆中的数据处在顺向。

拷贝编码
编码以下:

.circle li:nth-child(1) {
top: 15px;
left: 125px;
}
.circle li:nth-child(2) {
top: 125px;
left: 235px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:nth-child(3) {
top: 235px;
left: 125px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle li:nth-child(4) {
top: 125px;
left: 15px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}

下面在看1下预览,是否看起来好些许多了:

第6步:內部圆的css

在DEMO中大家还看见正中间有1个白色的带“DS”文本的圆,这里应用伪元素“:before”来进行,并对齐开展肯定精准定位,它不容易随大圆的转动而转动。

拷贝编码
编码以下:

/*INNER CIRCLE*/
.wrapper:before {
content: "DS";
text-align: center;
font: 70px/135px Georgia, Times, serif;
color: #efefef;
position: absolute;
top: 140px;
left: 110px;
z-index: 10;
width: 130px;
height: 130px;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
}

此后css款式所有界定进行,剩余的便是文章内容开始讲到的远程控制操纵元素个人行为:

第7步:圆的”:hover”伪元素设定

要使菜单转动,务必融合文章内容开始的远程控制操纵实例教程,当电脑鼠标悬停在锚点上时,下面的圆转动到对应的顶位置置。HTML中锚点和circle div是同级元素,这里大家必须搞定的是挑选器的难题,也是本文最难的一部分。因此挑选器一部分,第1个无需转动,因此大家从第2个刚开始以下:

拷贝编码
编码以下:

.menu > .two:hover ~ .circle {}

2所处的部位必须逆时针转动90°才可以抵达预期部位因此:

拷贝编码
编码以下:

menu > .two:hover ~ .circle {
-webkit-transform: rotate(⑼0deg);
-moz-transform: rotate(⑼0deg);
-ms-transform: rotate(⑼0deg);
-o-transform: rotate(⑼0deg);
transform: rotate(⑼0deg);
}

相近的大家有.one 0° .two ⑼0°, .three ⑴80° ,.four  ⑵70°.

拷贝编码
编码以下:

/*HOVER STATES*/
.menu > .one:hover ~ .circle {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu > .two:hover ~ .circle {
-webkit-transform: rotate(⑼0deg);
-moz-transform: rotate(⑼0deg);
-ms-transform: rotate(⑼0deg);
-o-transform: rotate(⑼0deg);
transform: rotate(⑼0deg);
}
.menu > .three:hover ~ .circle {
-webkit-transform: rotate(⑴80deg);
-moz-transform: rotate(⑴80deg);
-ms-transform: rotate(⑴80deg);
-o-transform: rotate(⑴80deg);
transform: rotate(⑴80deg);
}
.menu > .four:hover ~ .circle {
-webkit-transform: rotate(⑵70deg);
-moz-transform: rotate(⑵70deg);
-ms-transform: rotate(⑵70deg);
-o-transform: rotate(⑵70deg);
transform: rotate(⑵70deg);
}

最后实际效果: