css 圆形背景icon_纯CSS实现图标围成的圆环菜单

最新推荐文章于 2024-08-27 11:07:00 发布
最新推荐文章于 2024-08-27 11:07:00 发布
阅读量1k 收藏
点赞数
文章标签： css 圆形背景icon
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35723435/article/details/112049679
版权
这段代码展示了一个使用纯CSS创建的圆环形菜单，包含多个图标按钮，如家、聊天、上传等。当鼠标悬停在每个按钮上时，会出现背景高亮和扩展的描述框。这是一个用于网页交互设计的CSS/JavaScript代码示例。
摘要由CSDN通过智能技术生成
纯CSS圆环菜单-www.mb5u.com

/*www.mb5u.com*/

#circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:#fff url(/jscss/demoimg/200906/background.gif) no-repeat;}

#circularMenu li {display:block; width:60px; height:60px; position:absolute;}

#circularMenu li.home {left:120px; top:4px; background:url(http://p1.mb5u.com/texiao/0/20100522230608123.gif) no-repeat center center;}

#circularMenu li.chat {left:200px; top:40px; background:url(http://p1.mb5u.com/texiao/0/20100522230608124.gif) no-repeat center center;}

#circularMenu li.upload {left:35px; top:40px; background:url(http://p1.mb5u.com/texiao/0/20100522230608125.gif) no-repeat center center;}

#circularMenu li.email {left:230px; top:115px; background:url(http://p1.mb5u.com/texiao/0/20100522230608126.gif) no-repeat center center;}

#circularMenu li.address {left:5px; top:115px; background:url(http://p1.mb5u.com/texiao/0/20100522230608127.gif) no-repeat center center;}

#circularMenu li.shop {left:200px; top:190px; background:url(http://p1.mb5u.com/texiao/0/20100522230608128.gif) no-repeat center center;}

#circularMenu li.search {left:35px; top:190px; background:url(http://p1.mb5u.com/texiao/0/20100522230608129.gif) no-repeat center center;}

#circularMenu li.delivery {left:120px; top:225px; background:url(http://p1.mb5u.com/texiao/0/20100522230608130.gif) no-repeat center center;}

#circularMenu li a b {display:none;}

#circularMenu li a {display:block; width:60px; height:60px; text-align:center;}

#circularMenu li a:hover {background:url(http://p1.mb5u.com/texiao/0/20100522230608131.gif); text-decoration:none; font-family:georgia, serif;}

#circularMenu li a:hover b {position:absolute; display:block; width:100px; height:100px; font-size:16px; color:#63352c; background:#fff;}

#circularMenu li a:hover b span {display:block; font-size:12px; color:#888; font-weight:normal; margin-top:15px;}

#circularMenu li.home a:hover b {left:-22px; top:100px;}

#circularMenu li.chat a:hover b {left:-102px; top:64px;}

#circularMenu li.upload a:hover b {left:63px; top:64px;}

#circularMenu li.email a:hover b {left:-132px; top:-11px;}

#circularMenu li.address a:hover b {left:93px; top:-11px;}

#circularMenu li.shop a:hover b {left:-102px; top:-87px;}

#circularMenu li.search a:hover b {left:63px; top:-87px;}

#circularMenu li.delivery a:hover b {left:-22px; top:-121px;}

乆黎
关注
[04][创新实训记录]简单CSS实现头像悬浮菜单效果
qq_41998718的博客
06-20 652
简单CSS实现头像悬浮菜单效果 先上效果压压惊 由于在iview组件库中没有找到心仪的效果，索性借助几天前看的一个CSS卡片教程视频为灵感实现了这个纯CSS就能实现的简单效果。当然，头像<Avatar>与菜单列表<Card>还是借用了iview的头像与单元格。 实现原理 头像的定位是和特殊的存在，我想要实现的是，头像在鼠标放到头像的时候会产生一个头像便大的动画，随后菜单从右侧飘出，而且最终的叠加效果需要头像是停留在菜单的空白处的。而且当鼠标停留在不管是菜单还是头像的时候永远会保持当
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
发果叁
10-20 3810
在前面的两节 【CSS 进阶向】 中，我们通过纯粹的 CSS 结合 HTML 元素实现了两种不同的“流光边框”效果的按钮。两者都是通过元素（或者伪元素）配合 CSS 动画属性 animation 与自定义动画帧 @keyframes 来实现的。这次我们通过 Vue 的动态样式和计算属性，来实现一个点击展开的圆环菜单，并且实现菜单图标的顺序显示。先上最终效果和代码：在实现过程中，我们按照以下步骤：1.整体结构 和 控制菜单展开/首起的按钮 2.控制按钮的 hover 状态 3.展开后的圆环 4.每个菜单的样式
使用css实现一个圆形头像框效果
lingle1的博客
11-06 4315
本文转载，记录下来方便以后查找 原文链接：https://www.php.cn/css-tutorial-406575.html 方法一 直接设置img为圆形，这种情况下如果图片不是正方形，图片会被拉伸 <img class="circleImg" src="../img/photo/img.jpg" /> 对应的css为： .circleImg{ border-radiu...
CSS、JS 圆形菜单
最新发布
zhangliwen1101的博客
08-27 409
这段代码设置了菜单项的样式，包括宽高、透明度、过渡效果等，以及菜单项上链接的样式，包括颜色、背景色、边框半径等。这段代码设置了当菜单按钮被选中时，菜单项会从菜单按钮中心点向外展开，并且每个菜单项都有一个旋转角度和一个水平位移距离。这段代码定义了菜单按钮的样式，将其定位在页面中心，设置宽高为40px，透明度为0，鼠标指针为手型。这段代码设置了当菜单按钮被选中时，菜单按钮前后的两个伪元素会旋转45度，形成一个“X”形状。这段代码设置了当鼠标悬停在菜单按钮上时，菜单按钮和其前后的两个伪元素的背景色变为白色。
CSS圆形头像以及发光效果实现
功不唐捐，玉汝于成
05-31 799
CSS圆形头像以及发光效果的实现
好程序员web前端教程系列之CSS菜单图标知识整理
qq_35970166的博客
03-02 189
好程序员web前端教程系列之CSS菜单图标知识整理，CSS是一种用来表现HTML或XML等文件样式的计算机语言，它是web前端人才必须要掌握的基础技能之一。想要学习web前端，最开始的基础学习一定是CSS。接下来的好程序员web前端教程就给大家简单分享CSS菜单图标相关知识。 　　一般在写网页的时候会遇到一些小图标，通常一些复杂的图标我们可以选择使用第三方图标库，但是一些比较简单的小图标，像这种...
CSS 实现 圆圈中心叹号图标，模仿 “请在微信客户端访问链接提示页面图标”
weixin_43821402的博客
02-24 2206
<div style=" width:100px; height:100px; background-color:#10AEFF; border-radius:50px;"> <span style="height:100px; line-height:100px; display:block; color:#FFF; text-align:center;font-size:60px">i</span> </div>
CSS3圆形风格面包屑导航
04-02
在CSS3实现的圆形面包屑导航中，这些路径元素可能是相互连接的圆环或者独立的圆点，通过`:hover`伪类可以添加动态效果，如改变颜色或添加下划线，提高可点击性。 **图标导航**是另一种增强用户体验的方式，它将文字...
纯CSS3实现的绿色Loading加载动画特效源码.zip
10-31
本资源“纯CSS3实现的绿色Loading加载动画特效源码.zip”正是基于这些特性，为开发者提供了一套绿色的加载动画效果。 首先，我们来详细了解一下CSS3中的关键帧动画（Keyframe Animations），这是实现动态加载效果的...
基于jQuery插件实现环形图标菜单旋转切换特效
10-24
- `.feature-presenter-icon` 类控制图标本身，设置了背景颜色、对齐方式、过渡效果，以及光标样式为指针，提示用户这是一个可交互元素。 - `.feature-presenterimg` 类定义了图标图片的样式，如最大宽度、过渡效果...
css3实现loading动画加载特效代码
03-20
在这个例子中，我们创建了一个圆形的加载图标，通过`border-radius`使其看起来像一个圆环，然后用不同的边框颜色创建了视觉上的旋转效果。`animation`属性将`@keyframes`规则与元素关联，并设置动画的执行参数。 ...
纯CSS3环形菜单动画 可展开二级子菜单
11-24
纯CSS3环形菜单动画 可展开二级子菜单
纯CSS3实现手机APP滑动菜单动画特效特效代码
03-20
本源码是一款非常有创意的纯CSS3导航菜单特效的代码。该导航菜单主要通过CSS3 transform和transition方法实现效果，非常简单。该特效由進擊的燊提供。本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗，不支持IE8及以下浏览器。
CSS3二级环形动画菜单特效代码
03-20
CSS3二级环形动画菜单，旋转动画菜单。
CSS3底部半圆形导航菜单代码，点击底部加号，会弹出一个半圆形的导航栏，不支持IE浏览器，支持chorme,firefox浏览器
05-20
CSS3底部半圆形导航菜单代码，点击底部加号，会弹出一个半圆形的导航栏，不支持IE浏览器，支持chorme,firefox浏览器
纯css3展开扇形弧形多个菜单.rar
09-28
利用纯CSS3实现扇形动画菜单(简化版),实现后的效果非常动感漂亮时尚 样式不支持IE 纯css3样式引入页面即可，值得收藏与推荐
css 圆形背景icon_纯css实现icon总结
weixin_39672296的博客
12-21 862
以下是在工作之余总结的一些常用icon，纯css实现CSS实现icon图标效果目 录1 关闭按钮. 22 单线箭头. 33 双线箭头. 34 三角形. 45 向下箭头. 56 圆圈. 67 空心圆圈. 68 向右指示. 79 提示框. 810 返回顶部和底部.1 关闭按钮UE图：代码：.closeButton{position: absolute;right: 7px;top: 8px;-webk...
CSS绘制小三角形/圆形等各种小图标的方法
double2的博客
10-24 7658
CSS绘制小三角形/圆形等各种小图标的方法切图时常常需要一些小图标辅助信息模块的表达，比如带有小三角选中状态的导航栏，气泡框等等。如果以图片的方式加载这些小图标会增加http的请求量，不利于性能优化，因此我们可以用CSS，HTML5 Canvas,SVG,基于base64的图片编码等方式实现图标的绘制。 下面主要介绍几种常用的CSS绘制小三角以及其他图形的方法： 利用border属性绘制小三角
用css画一个原型里有一个对号或者叉叉的图标
都是狠人的博客
04-12 1451
用css画一个圆形里有一个对勾或者叉叉的图标 <!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"&
纯CSS实现的个人中心导航菜单与图标示例
本文将介绍一款由纯CSS实现的美观且功能齐全的导航菜单，特别适用于个人中心的设计。作者之前分享过使用jQuery构建的导航菜单，而这次的CSS版本则无需依赖JavaScript，使得页面加载更快且更加简洁。这款导航菜单的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值