在站长素材网网页模板中无意发现的感觉不错就去研究了一下. 因为某些原因需要大家自己排下版, 关键 CSS 代码都写上了. 有 css3 基础就能看懂
!!! 好东西都是需要分享的!!!
html 代码
- <ul class="header-nav pt35 pr30">
- <li class="nav-itme">
- <a class="link nav-active fz18" href="javascript:;" data-hover="首页" target="_blank"> 首页 </a>
- </li>
- <li class="nav-itme">
- <a class="link fz18" href="javascript:;" data-hover="关于新天杰" target="_blank"> 关于新天杰 </a>
- </li>
- <li class="nav-itme">
- <a class="link fz18" href="javascript:;" data-hover="培训课程" target="_blank"> 培训课程 </a>
- </li>
- <li class="nav-itme">
- <a class="link fz18" href="javascript:;" data-hover="咨询项目" target="_blank"> 咨询项目 </a>
- </li>
- <li class="nav-itme">
- <a class="link fz18" href="javascript:;" data-hover="新闻资讯" target="_blank"> 新闻资讯 </a>
- </li>
- <li class="nav-itme">
- <a class="link fz18" href="javascript:;" data-hover="客户展示" target="_blank"> 客户展示 </a>
- </li>
- <li class="nav-itme">
- <a class="link fz18" href="javascript:;" data-hover="企业大学" target="_blank"> 企业大学 </a>
- </li>
- </ul>
css 代码
- .header-nav .link{ position: relative;}
- // 在 a 元素内容前插入一个新内容
- .header-nav .link:before{
- content: attr(data-hover);// 插入内容, 通过 attr() 获取属性 data-hover 值并把其值当作插入内容 (data-hover 值看 html 代码 a 元素)
- position: absolute;// 必须有, 不然插入内容没法动
- color: #e62129;
- opacity: 0;// 隐藏该内容, 但该内容还是存在在页面上的
- -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);// 兼容写法
- -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);// 兼容写法
- transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);// 把内容 2D 缩放并向右移 10 上移 10, 然后 2D 旋转
- -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
- -moz-transition: -moz-transform 0.3s, opacity 0.3s;
- transition: transform .3s , opacity .3s;// 设置过度效果
- }
- // 移入移出, 获取焦点
- .header-nav .link:hover:before,
- .header-nav .link:focus:before{
- -webkit-transform: scale(1) translateX(0) translateY(0) rotate(0);
- -moz-transform: scale(1) translateX(0) translateY(0) rotate(0);
- transform: scale(1) translateX(0) translateY(0) rotate(0);// 插入内容恢复原状并于页面内容重合
- -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
- -moz-transition: -moz-transform 0.3s, opacity 0.3s;
- transition: transform .3s , opacity .3s;// 设置过度效果
- opacity:1;// 显示内容
- }
整体说来挺简单主要是创意和思路!!!
来源: http://www.qdfuns.com/article/41484/a2345947ebeb91554398770e4a5aaa10.html