风也温柔

计算机科学知识库

css导航条跟随 纯CSS3创意导航菜单特效

  简要教程

  这是一款非常有创意的纯CSS3导航菜单特效。该导航菜单主要通过CSS3 和方法实现效果,非常简单。该特效由進擊的燊提供。

  使用方法

  HTML结构

  该导航菜单使用一个元素来包裹一组无序列表。

  <pre class="brush:css;toolbar:false">

  [Home][1]
  [Docs][2]
  [Demos][3]

  [中文][4]

  登录后复制

  CSS样式

  该导航菜单在鼠标滑过菜单项时,菜单项稍稍有些倾斜动画,并且在该菜单项的上下会有两条线条滑出。菜单项的倾斜动画是在菜单项被鼠标滑过时,使用属性来对超链接元素进行旋转和缩放。

  <pre class="brush:css;toolbar:false">li a {

display: block;
font-size: 20px;

text-align: center;
padding: 10px 15px;

}

li a:hover {

transform: rotate(5deg) scale(1.1);
re>

  登录后复制

  菜单项的上下2条线条使用超链接元素的:和:after伪元素来制作。它们开始时透明度为0css导航条跟随,宽度为0,并使用属性将它们旋转和移动。

  <pre class="brush:css;toolbar:false">li a:before, li a:after {

opacity: 0;
border-top: 1px solid white;
content: &#39;&#39;;
display: block;
position: relative;
z-index: -1;
margin: auto;
width: 0px;

<p>

}

li a:before {

top: 0px;
transform: rotate(120deg) translateY(-50%) translateX(-50%);

}

li a:after {

top: 5px;

  

transform: rotate(-60deg) translateY(-50%) translateX(-50%);

}</pre></p>
  登录后复制

  在鼠标滑过时,它们的透明度变为1,宽度设置为20像素,并采用ease效果的平滑过渡。

  <pre class="brush:css;toolbar:false">li a:hover:before, li a:hover:after{

transition: all 0.3s ease;
opacity: 1;
width: 20px;
re>

  登录后复制

  以上就是纯CSS3创意导航菜单特效的内容css导航条跟随css导航条跟随 纯CSS3创意导航菜单特效,更多相关内容请关注PHP中文网()!

  文章来源:https://www.php.cn/css-tutorial-349111.html