没有合适的资源?快使用搜索试试~ 我知道了~
纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)
4 下载量 26 浏览量
2020-09-25
07:54:19
上传
评论
收藏 113KB PDF 举报
温馨提示
试读
2页
在之前的文章中曾经写到过一篇“三角形变形记之纯css实现的分布导航条效果”,其中用到了边框实现三角形的效果。最近又折腾了一个六边形的蜂窝效果给大家蹂躏。主要用到了是两个绝对定位的三角形,一个在上面一个在下面,热爱导航的你可千万不要错过了啊,或许本文对你有
资源推荐
资源详情
资源评论
纯纯css实现的六边形实现的六边形(蜂窝蜂窝)导航效果导航效果(支持支持hover/兼容浏览器兼容浏览器)
在之前的文章中曾经写到过一篇“三角形变形记之纯css实现的分布导航条效果”,其中用到了边框实现三角形的
效果。最近又折腾了一个六边形的蜂窝效果给大家蹂躏。主要用到了是两个绝对定位的三角形,一个在上面一
个在下面,热爱导航的你可千万不要错过了啊,或许本文对你有
博客foreach(everyday){久}不更新了,关于前端开发方面的东西最近关注也没有往常频繁了。百度大神依旧对我的网站不闻不
顾,无奈。但是技术还是要提高,分享依旧要继续。顺应一句话,你收或者不收,我都在这里。只增不减,不悲不喜。
ok,废话免谈。在之前的文章中曾经写到过一篇“三角形变形记之纯css实现的分布导航条效果”,其中用到了边框实现三角形
的效果。最近又折腾了一个六边形的蜂窝效果给大家蹂躏。主要用到了是两个绝对定位的三角形,一个在上面一个在下面。配
合一个长方形拼接成了六边形。该效果兼容各大主流浏览器,支持hover效果,重要的是纯css实现的。不多说了,大家运行代
码观看效果吧。
<!DOCTYPE html>
<html>
<head>
<meta http-
equiv="Content-Type"
content="text/html;
charset=utf-8" />
<title>六边形</title>
<style>
.wrap{margin:100px;widt
h:303px;}
.nav{width:100px;height:
58px;background:#33993
3;display:inline-
block;position:relative;lin
e-height:58px;text-
align:center;color:#ffffff;fo
nt-size:14px;text-
decoration:none;float:left;
margin-top:31px;margin-
right:1px;}
.nav
s{width:0;height:0;display
:block;overflow:hidden;po
sition:absolute;border-
left:50px dotted
transparent;border-
right:50px dotted
transparent;border-
bottom:30px solid
#339933;left:0px;top:-
30px;}
.nav
b{width:0;height:0;display
:block;overflow:hidden;po
sition:absolute;border-
运行代码
复制代码
另存代码
<script language="JavaScript">ffcod = delpost.runcode4 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode4 .value = ffcod;</script> 提示:您可以先修改部分代码再运行
具体实现的原理部分就不多说了,大家下载下来代码稍加研究就明白了。利用这个效果可以做多种多样的效果。关键是看每个
人的思维发散空间,我比较笨,做不来特别有想法的东西,仅此提供方法给那些有想法的developer。另外下面说下一个关于
边框实现三角形在ie6的兼容效果。
在之前的三角形变形记之纯css实现的分布导航条效果文章中写了比较详细的边框实现三角形的方法,但是在针对ie6的方法上
不是特别的完美。现在发出最新的兼容ie6的方法,就是非显示的边框border-style设置为dotted,需要显示的边框border-style
设置为solid;
提示:请在提示:请在ie6下对比查看,如有下对比查看,如有bug欢迎反馈欢迎反馈
<!DOCTYPE html>
<html>
<head>
<meta http-
equiv="Content-Type"
content="text/html;
charset=utf-8"/>
<title>ie6下实现三角形
</title>
</head>
<body
style="background:#ecec
ec;">
<div style="width: 0px;
height: 0px; display:
inline-block; margin-left:
20px; border: 40px solid
transparent; border-
bottom-color: #f70; font-
运行代码
复制代码
另存代码
<script language="JavaScript">ffcod = delpost.runcode5 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode5 .value = ffcod;</script> 提示:您可以先修改部分代码再运行
纯纯css实现六边形的高级进阶实现六边形的高级进阶
实现了六边形难免想要整出点幺蛾子来。下面我给该六边形加了一个背景图,做背景平铺到六边形的后面。样式可以简单实现
了,但是仍旧存在诸多的不足,1是ie的兼容问题,然后是如果存在多个的情况下,不能实现蜂窝的效果。哪位高手如能完美
实现,还请告知。下面看我实现代码:
<!DOCTYPE html>
<html>
<head>
<meta http-
equiv="Content-Type"
content="text/html;
运行代码
复制代码
另存代码
<script language="JavaScript">ffcod = delpost.runcode6 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode6 .value = ffcod;</script> 提示:您可以先修改部分代码再运行
资源评论
weixin_38570854
- 粉丝: 5
- 资源: 931
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功