html转动的圆圈,CSS圆形旋转效果 纯CSS制作圆形旋转菜单效果(七步完成)
我们理念中的菜单都是矩形的,不是横向排列就是纵向排列,这里我们打破了常规的思维,把菜单做成圆形的。
在这里我们不得不克服几个问题:
如何定义html如何悬停定位菜单元素
在此之前先看一下最终效果是怎样的,DEMO放在前面主要是增加大家阅读的兴趣。
下面就让我们开始今天的教程吧
第一步:构建HTML
在编写HTML之前,必须先了解将要构建的结构是怎么样的,下图表示要构建的结构:
每个顶部的矩形框都与下面大圆中的一个小圆相联系,当把鼠标悬停在矩形框上时,对应的小圆旋转到菜单的顶部。而实现这个功能的难点就是怎样实现悬停在一个元素上从而影响另一个元素的表现状态。
为解决这个问题,让我们看看下面的HTML:
复制代码代码如下:
anchor
target
我们希望通过鼠标悬停在anchor上来改变target段落的颜色,如果你对hover的远程操作有一个基本的概念,你可能会先写出下面的css代码:
复制代码代码如下:
a:hover p { color: blue;}
这段代码不能达到我们的预期效果,观察上面HTML代码,我们要改变颜色的元素和鼠标悬停的元素分别在不同的div中,这无形中增加了我们实现的难度,所以需要改变HTML结构如下,把两个元素分别放在同一个div下:
复制代码代码如下:
target
把两个元素分别放在同一个div下,anchor和target作为同级元素可以进行以下操作
复制代码代码如下:
a:hover + p { color: blue;}
以上就实现了鼠标悬停在a上面,并且使紧临它的同级元素改变颜色。
具体应用:
运用上面的知识到本教程案例中,我们可以想出一个可行的结构,首先创建3个嵌套div,分别命名class为wrapper, menu和circle.
复制代码代码如下:
在menu div里面设置4个锚点,分别有不同的class,在circle div里面是一个包含4个数字的ul li元素
复制代码代码如下:
One
Two
Three
Four
- 1
- 2
- 3
- 4
让我们用一张图片来更清晰的理解上面所描述的结构
第二步:wrapper div的css
上面的HTML代码自此就书写完毕,下面主要的是css的问题,首先我们定义一些基本的样式:
复制代码代码如下:
* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}
/*WRAPPER*/
.wrapper {
position: relative;
margin: 20px auto;
width: 3670px;
}
第三步:circle div的css
这一步我们将定义一个大圆,用css制作圆是很简单的我们只需要把元素的宽度和高度设置成相等,然后把border的宽度设置成50%就行了。更多关于利用border来创建图形的教程可以参看我的《创建三角形的几种不同的方式》这篇文章。
复制代码代码如下:
/*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;
}
如果我们看一看实时预览,我们应该有一个漂亮的大圆和一些其他各种分散的元素,接下来将会对这些分散的元素进行处理。
第四步:menu div的css
下面是对锚点(也就是这里的元素),做一些样式设置和悬停效果:
复制代码代码如下:
.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
background: #eee;
}
在启用预览看一些,将会比上面好看的多,并且悬停会出现设置的效果,但是ul li还是是很乱的表现,接下来将解决这个问题:
第五步:小圆的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);
}
下面在看一下预览,是不是看起来要好很多了:
第六步:内部圆的css
在DEMO中我们还看见中间有一个白色的带“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样式全部定义完成,剩下的就是文章开头讲到的远程控制元素行为:
第七步:圆的”:hover”伪元素设置
要使菜单旋转,必须结合文章开头的远程控制教程,当鼠标悬停在锚点上时,下面的圆旋转到对应的顶部位置。HTML中锚点和circle div是同级元素,这里我们需要搞定的是选择器的问题,也是本文最难的部分。所以选择器部分,第一个不用旋转,所以我们从第二个开始如下:
复制代码代码如下:
.menu > .two:hover ~ .circle {}
2所处的位置需要逆时针旋转90°才能到达预期位置所以:
复制代码代码如下:
menu > .two:hover ~ .circle {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
类似的我们有.one 0° .two -90°, .three -180° ,.four -270°.
复制代码代码如下:
/*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(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.menu > .three:hover ~ .circle {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.menu > .four:hover ~ .circle {
-webkit-transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
-ms-transform: rotate(-270deg);
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}
最终效果:
html转动的圆圈,CSS圆形旋转效果 纯CSS制作圆形旋转菜单效果(七步完成)相关推荐
- html css右下角三角形,纯CSS绘制三角形(各种角度)
CSS/HTML 的 纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
- [css] 怎样用纯CSS实现禁止鼠标点击事件?
[css] 怎样用纯CSS实现禁止鼠标点击事件? pointer-events: none; 是css3新出现的属性,意思就是禁止鼠标点击事件,当元素中有这一属性时,链接.点击事件统统失效. 个人简介 ...
- html 纯css 树形结构,纯css实现树形结构方法教程
本文主要介绍了纯css实现树形结构的示例代码的相关资料,使用CSS和HTML就可以将一个多级无序列表的节点展现成树状结构,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希 ...
- html图片倒角,CSS实例:纯CSS打造斜角
关于CSS打造斜角,先说一下历史,在CSS+DIV流行以前,也就是用表格作为网页框架的时候,人们通过在一个单元格里加入一个斜角图片来来做这种效果的.这种技术现在已经完全过时了,这里不讨论.CSS+DI ...
- css表格排序,纯CSS实现表格排序-利用CSS 变量和Flexbox
1.引子 今天闲逛知名前端资讯站Front-End Front,发现一个比较有意思的效果,给大家分享下,希望可以对大家有所启发. 纯CSS实现表格排序 心急的同学,先看效果,我放在codepen上. ...
- 查看全文的css,如何通过纯CSS实现“点击展开全文”功能
看标题大家不难猜到我今天要实现的功能,正如你打开 HTML代码 这是前端开发博客的正文 点击展开全文 将上述代码加入到 single.php 文件里面,按钮一般命名为"点击展开全文" ...
- css信号强度显示,纯css实现wifi信号图标及强弱/链接/加密状态
分享一段自己写的纯css实现的wifi连接的各种状态代码,希望能帮助到一些学习的朋友.默认图标大小为20px,已经通过transform放大,具体的可以见详细代码及预览. 运行代码 纯css实现wif ...
- Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
- 马自达css滑动按钮,纯css的滑块开关按钮
之前在项目中使用滑块开关按钮,纯css写的,不考虑兼容低版本浏览器,先说下原理: 使用 checkbox 的 选中 checked 属性改变css 伪类样式, 一定要使用-webkit-appeara ...
最新文章
- java 语言实现的随机数生成算法
- WebGoat系列实验Cross-Site Scripting (XSS)
- pygame的一个小问题,未解决
- 基于Xml 的IOC 容器-开始读取配置内容
- Java –手工Classloader隔离
- 如何将Eclipse中的开源项目使用到Android Studio中
- python时间差怎么转换为数字_pandas进行时间数据的转换和计算时间差并提取年月日...
- [伤了昨天的心 裂成碎片和沙一起飞]五香里脊
- 三、Express 路由
- windows 下安装 mysql
- java反射 javabean_Java反射之模仿JavaBean接收表单参数.
- 华为铁三角:铁三角模式诞生背景与思考
- 汉语语法与人工智能---数据结构+汉语语法
- 如何高效学习 - 斯科特·扬
- PyQt5中的按钮2-QToolButton
- 百事正用AI种土豆,连削皮算法都搞上了
- Python——用面相对象写奥特曼大战小怪兽
- excel行列互换_小白学Excel怎么做?|苦苦整理四小时!
- webDav之jackrabbit-webdav基础操作
- Poly-encoders: architectures and pre-trainingstrategies for fast and accurate multi-sentence scorin
热门文章
- c语言综合实验报告与材料专业,实验报告汇总
- 【参赛作品85】openGauss2.1.0 for openEuler 21.09安装手记
- 如何制作迅雷7的皮肤,如何获取迅雷7皮肤的图片
- 四合一图床上传-高速Cdn图床百度/新浪/360/搜狗图床
- Edraw是一个不错的画图工具
- html制作席慕容的诗,席慕容现代诗歌6首
- ios9.0.2无需验证降级8.4.1详细教程
- 使用python脚本批量修改Arcgis的数据字段类型或者名称
- 3.17服务器维护,图文解析3月17日部分维护内容
- C语言五子棋进阶版(增设玩家对战,大棋盘,棋盘行列对应等)