.step{ position:relative;} .step a{ position:absolute; display:inline-block; color:#fff;} .step a span{ display:inline-block; float:left;} .step a .span_2{ text-align:center; line-height:40px;} .step_first .span_1{ height:40px; width:180px; background:#c5c5c5; text-align:center; line-height:40px;} .step_first .span_2{ width:0; height:0; line-height:0; font-size:0; border-left:20px solid #c5c5c5; border-top:20px solid transparent; border-bottom:20px solid transparent;} .step_first:hover .span_1{ background:#6ec038;} .step_first:hover .span_2{ border-left:20px solid #6ec038;} .step_model span{ display:inline-block;} .step_model .span_1{ width:0; height:0; line-height:0; font-size:0;border-left:20px solid transparent;border-top:20px solid #c5c5c5; border-bottom:20px solid #c5c5c5;} .step_model .span_2{ height:40px; width:160px; background:#c5c5c5;} .step_model .span_3{ width:0; height:0; line-height:0; font-size:0; border-left:20px solid #c5c5c5; border-top:20px solid transparent; border-bottom:20px solid transparent;} .step_model:hover .span_1{ border-top:20px solid #6ec038; border-bottom:20px solid #6ec038;} .step_model:hover .span_2{background:#6ec038; } .step_model:hover .span_3{border-left:20px solid #6ec038;} .step_2{ left:185px;} .step_3{left:370px;} .step_4{ left:555px;} .step_4 .span_2{ width:180px;}
<div class="step"> <a href="#" class="step_first"><span class="span_1">第一步</span><span class="span_2"></span></a> <a href="#" class="step_model step_2"><span class="span_1"></span><span class="span_2">第二步</span><span class="span_3"></span></a> <a href="#" class="step_model step_3"><span class="span_1"></span><span class="span_2">第三步</span><span class="span_3"></span></a> <a href="#" class="step_model step_4"><span class="span_1"></span><span class="span_2">第四步</span></a> </div>
相关推荐
一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用CSS3来自定义边框,边框呈涂鸦风格。用CSS3实现自定义边框的好处是可以自适应边框内部的...
纯CSS写带边框的三角形
7组漂亮的纯CSS3搜索框7组漂亮的纯CSS3搜索框7组漂亮的纯CSS3搜索框7组漂亮的纯CSS3搜索框7组漂亮的纯CSS3搜索框
纯css3悬停文字线条边框动画特效
纯css3鼠标经过按钮边框动画特效
纯CSS3霓虹样式搜索框动画特效是一款基于css3 transform属性制作点击搜索按钮展开收缩搜索框代码。
纯CSS3炫酷元素边框线条动画特效 ,自 动 循 环运动。
纯css3手写轮播,没有js哈!但是有缺陷,自动轮播和焦点切换,只可选其一
animated-border.css是一款纯CSS3按钮边框线条动画特效。该CSS3按钮边框线条动画特效提供了40多种炫酷的边框线条动画供你选择使用。
纯CSS3实现动画搜索框.zip
纯css3写的开关切换,无需用javascript实现,需要的小伙伴们赶紧试试吧
纯css3制作Word文本编辑器效果 纯css3制作Word文本编辑器效果
纯css3 ui搜索框样式代码 纯css3 ui搜索框样式代码 纯css3 ui搜索框样式代码
用纯css代码实现的图标集,没有任何依赖
代码简介:纯CSS3 Hover按钮边框动画特效是一款鼠标移上去显示按钮边框动画特效。
这是一款纯css3炫酷粒子动画特效。该特效使用多个div来制作光点粒子效果,并使用CSS3动画来制作光点粒子的上升动画,效果非常炫酷。
纯CSS3按钮3D效果,在鼠标点击按钮时,按钮会有下凹的视觉效果,非常好看。
纯CSS3 UI制作搜索框样式代码.zip
纯CSS3悬停按钮边框动画特效,总共有5款不同效果的边框线条动画特效。