导航新风尚:CSS梯形设计,让网站菜单不再单调!

简介: 导航新风尚:CSS梯形设计,让网站菜单不再单调!

先上效果




🌟 CSS梯形导航是一种打破常规的设计思路,它通过非对称的几何形状为网站带来新颖的视觉体验。本文将指导您如何使用CSS来构建一个梯形导航栏,不仅增强了网页的美学吸引力,还提供了一种新颖的用户交互方式。



完整代码


以下是完整代码:

HTML:

<div class="trapezoid" id="trapezoid">
    <ul>
      <li class="zIndex">Home</li>
      <li>Blog</li>
      <li>Source</li>
      <li>Bookmark</li>
      <li>About</li>
    </ul>
  </div>

CSS代码

ul {
      list-style: none;
    }
    .trapezoid li {
      position: relative;
      display: inline-block;
      width: 100px;
      height: 50px;
      line-height: 65px;
      color: #fff;
      text-align: center;
      cursor: pointer;
    }
    .zIndex {
      z-index: 1;
    }
    .trapezoid li::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: -15px;
      right: -15px;
      z-index: -1;
      border-radius: 10px 10px 0 0;
      border: 1px solid #fff;
      background: #2175BC;
      -moz-transform: perspective(0.5em) rotateX(5deg);
      -ms-transform: perspective(0.5em) rotateX(5deg);
      -webkit-transform: perspective(0.5em) rotateX(5deg);
      transform: perspective(0.5em) rotateX(5deg);
      -moz-transform-origin: bottom;
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
    }
    .trapezoid li:hover::after {
      background: #3B9BE5;
    }
相关文章
|
1天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
2天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
8天前
|
前端开发
网站变灰白css
本文介绍了如何通过CSS滤镜效果实现网站变为灰白色,具体方法是在HTML或BODY标签上应用`filter`属性,使用`progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)`和`-webkit-filter: grayscale(100%)`实现灰度效果。
20 0
|
2月前
|
前端开发
导航栏也时尚:CSS缩放动画,让导航链接在鼠标经过时绽放!
导航栏也时尚:CSS缩放动画,让导航链接在鼠标经过时绽放!
|
2月前
|
前端开发
一键复制:期末大作业常用的CSS动画导航效果!
一键复制:期末大作业常用的CSS动画导航效果!
|
2月前
|
前端开发
视觉充电:CSS动画特效,为网站带来动力与活力!(一键复制)
视觉充电:CSS动画特效,为网站带来动力与活力!(一键复制)
|
2月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML、CSS与JavaScript之旅
在这个数字时代,拥有一个个性化的网络空间已成为许多人的梦想。本文将引导你了解如何从零开始,使用HTML、CSS和JavaScript创建属于自己的博客网站。我们将探索这些技术的基础概念,并通过实际代码示例展示如何将静态页面转变为动态交互式网站。无论你是编程新手还是希望扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。【8月更文挑战第31天】
|
2月前
|
前端开发
官网导航更智能:CSS动画下划线,让每一次点击都充满期待!
官网导航更智能:CSS动画下划线,让每一次点击都充满期待!
|
2月前
|
前端开发
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!
|
3月前
|
前端开发
css 巧用 ::after 和 ::before 实现竖排分类导航
css 巧用 ::after 和 ::before 实现竖排分类导航
39 1