【demo】立体方块旋转导航栏(html+css3)

最新推荐文章于 2024-06-06 19:50:54 发布
最新推荐文章于 2024-06-06 19:50:54 发布
阅读量1.2k 收藏 9
点赞数
分类专栏： demo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43606809/article/details/97398176
版权
本文详细介绍了一种使用HTML和CSS实现的具有3D翻转效果的菜单栏设计。通过CSS3的transform和transition属性，为网站导航菜单增添了动态交互体验，使用户在浏览时感受到更为直观和丰富的视觉效果。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

body {
  background-color:#edecec;
}
ul, li {
  list-style: none outside none;
}
/* basic menu styles */
.nav-menu {
  display: block;
  background: #74adaa;
  width:951px;
  margin: 50px auto 150px;
}
.nav-menu > li {
  display: inline;
  float: left;			
  border-right:1px solid #94c0be;
  position: relative;
}
.nav-menu > li:last-child {
  border-right: none;
}
.nav-menu li a {
  color: #fff;
  display: block;
  text-decoration: none;
  font-family: 'sansationregular';
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-transform: capitalize;
  overflow: visible;
  line-height: 20px;
  font-size: 20px;
  padding: 15px 30px 15px 31px;			
}

/* animation domination */
.three-d {
  -webkit-perspective: 200px;
  -moz-perspective: 200px;
  -ms-perspective: 200px;
  -o-perspective: 200px;
  perspective: 200px;
  -webkit-transition: all .07s linear;
  -moz-transition: all .07s linear;
  -ms-transition: all .07s linear;
  -o-transition: all .07s linear;
  transition: all .07s linear;
  position: relative;
}

.three-d:not(.active):hover {
  cursor: pointer;
}

.three-d:not(.active):hover .three-d-box, 
.three-d:not(.active):focus .three-d-box {
  -wekbit-transform: translateZ(-25px) rotateX(90deg);
  -moz-transform: translateZ(-25px) rotateX(90deg);
  -o-transform: translateZ(-25px) rotateX(90deg);
  -ms-transform: translateZ(-25px) rotateX(90deg);
  transform: translateZ(-25px) rotateX(90deg);
}

.three-d-box {
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-transform: translatez(-25px);
  -moz-transform: translatez(-25px);
  -ms-transform: translatez(-25px);
  -o-transform: translatez(-25px);
  transform: translatez(-25px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.front {
  -webkit-transform: rotatex(0deg) translatez(25px);
  -moz-transform: rotatex(0deg) translatez(25px);
  -ms-transform: rotatex(0deg) translatez(25px);
  -o-transform: rotatex(0deg) translatez(25px);
  transform: rotatex(0deg) translatez(25px);
}

.back {
  -webkit-transform: rotatex(-90deg) translatez(25px);
  -moz-transform: rotatex(-90deg) translatez(25px);
  -ms-transform: rotatex(-90deg) translatez(25px);
  -o-transform: rotatex(-90deg) translatez(25px);
  transform: rotatex(-90deg) translatez(25px);
  color: #FFE7C4;
}

.front, .back {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #74adaa;
  padding: 15px 30px 15px 31px;	
  color: white;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.nav-menu li .active .front,
.nav-menu li .active .back,
.nav-menu li a:hover .front,
.nav-menu li a:hover .back {
  background-color: #51938f;
  -webkit-background-size: 5px 5px;
  background-size: 5px 5px;
  background-position: 0 0, 30px 30px;
  background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
  background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
  background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
  background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
  background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
}
.nav-menu ul {
  position: absolute;
  left: -40px;
  text-align: left;
  line-height: 40px;
  font-size: 14px;
  width: 200px;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -webkit-transform-origin: 0px 0px;
  -moz-transform-origin: 0px 0px;
  -ms-transform-origin: 0px 0px;
  -o-transform-origin: 0px 0px;
  transform-origin: 0px 0px;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.nav-menu > li:hover ul {
  display: block;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
    </style>
</head>
<body>
    <div id="nav">
        <ul class="nav-menu clearfix unstyled">
            <li><a href="#" class="three-d active">
                Home
                <span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
            </a></li>
            <li><a href="#" class="three-d">
                Services
                <span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
            </a></li>
            <li><a href="#" class="three-d">
                Products
                <span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>
            </a></li>
            <li><a href="#" class="three-d">
                About
                <span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
            </a></li>
            <li><a href="#" class="three-d">
                Contact
                <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
            </a></li>
            <li><a href="#" class="three-d">
                Blog
                <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
            </a>
                <ul class="clearfix unstyled drop-menu">
                    <li><a href="#" class="three-d">
                            Html5
                            <span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>
                        </a></li>
                        <li><a href="#" class="three-d">
                            Css3
                            <span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>
                        </a></li>
                        <li><a href="#" class="three-d">
                            JavaScript
                            <span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>
                        </a></li>
                        <li><a href="#" class="three-d">
                            Videogames
                            <span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>
                        </a></li>
                </ul>
            </li>
            <li><a href="#" class="three-d">
                Shop On-line
                <span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>
            </a></li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

阿庭
关注
专栏目录
css 实现导航栏demo
12-30
css 实现导航栏demo，html格式文件 直接浏览器打开即可。
CSS3学习-用CSS制作立体导航栏
weixin_30877493的博客
10-15 118
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS制作立体导航</title> <link rel="stylesheet" href="http://ww...
CSS3——旋转方块
ForeverSc
10-07 885
#cube{ height: 200px; width: 200px; margin: auto; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); } #f1{ height: 200px; width: 200px; background: #00
html——导航demo
weixin_30906185的博客
11-02 186
通过行内块、伪类对导航栏进行设置 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body{ margin:0; ...
css3动画方块旋转
webhhhhhh的博客
01-02 708
css3动画 transform,animation 图片 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
weixin_46615135的博客
03-23 1580
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
HTML CSS基础
m0_46424423的博客
08-30 734
level 1 姬成 (一)简介 编辑器，快捷键，打字法 命令提示符终端学习 专业素养：超文本标记语言Hyper Text Markup Language (二)HTML标签 1.根标签： <html></html> 2.段落标签:只能有一个 <p>段落标签</p> 3.h标签 独成一段，逐次减少。更改字体大小，加粗字体 <h1></h1>——<h6></h6> 4.加粗字体 <strong>
HTML&CSS笔记
我佛很悲
11-20 1083
HTML&CSS笔记 此笔记为李立超老师网课内容
尚学堂-HTML-CSS（基础）的学习记录
xieanna123的博客
03-16 1738
HTML 和 CSS 核心基础教程 尚学堂的教程 https://www.bilibili.com/video/av21557880?p=1 笔记 一、HTML和CSS的简介 20191010(1-4） HTML (Hypertext Markup Language)超文本标记语言 。它负责网页的三个要素之中的结构。HTML 使用标签的的形式来标识网页中的不同组成部分。所谓超文本指的是超链接 ，使...
极客导航 - 建站教程的背景
GeekS356的博客
03-01 780
缘起 飞雪融化,一整冬的寒冷正悄悄离开. 捉不住,纷乱的思绪洒落在键盘上,融化,聚集,凝结. 终于,形成一块翠蓝的结晶. 还记得第一次见到那是一段昏暗的时期,每日对着电脑打写如麻的算法题,直到某一天晚上,我突然有了做一个自带搜索引擎的网页的想法,暗下决心后我开始着手编写. 几行代码过后,我的想法现形了.那个页面并不算得好,只是很简洁,于是有了加一些链接的想法,就在那时候我突然明白自己是要做一个导航...
HTML5实现图标会旋转的竖向导航菜单.rar
07-10
HTML5实现图标会旋转的竖向导航菜单，竖直排列的网站导航，当鼠标悬停于图标时，图标会旋转，称之为旋转菜单也不为过。
CSS3实现网页立体导航
03-17
使用CSS3实现的网页立体导航条， position: relative; display: inline-block; padding: 0 30px; font-size: 15px; text-shadow: 1px 2px 4px rgba(0,0,0,.5); /*设置字体向x轴偏移1px y轴偏移6px 阴影模糊半径为3px 设置rgb颜色值以及半透明效果*/ list-style: none outside none; } .nav li:after{ content: ""; position: absolute; top: 20px; right: 0; width: 1px; height: 15px; background: linear-gradient(to bottom,#f82f87,#b0363f,#f82f87); } .nav li:last-child:after{ width: 0; height: 0; }
css3立体方块菜单3D旋转切换特效
06-05
一款垂直排列的css3立体方块菜单3D旋转切换特效，鼠标悬停导航菜单3D旋转动画效果。
3D翻转FLASH导航栏
04-04
3D翻转FLASH导航栏 3D翻转FLASH导航栏 3D翻转FLASH导航栏
简单导航栏 demo
涛痕
06-06 1071
效果思路红条是绝对定位，根据鼠标移动改变自己的位置源码html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> <link href="css/index.css" type="text/css" rel="stylesheet"> <script src
html css实现win8,用CSS3实现Win8风格的方格导航菜单效果
weixin_42517963的博客
06-19 273
代码如下所示：复制代码代码如下:用CSS3实现Win8风格的方格导航菜单效果#about {color: #999;text-align: center;font: 0.9em Arial, Helvetica;}#about a {color: #777;}.menu {width: 620px;margin: 100px auto;padding: 15px;list-style: none;...
案例-翻转的导航栏（CSS3）
...
08-16 641
案例-翻转的导航栏（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
图像的立体旋转
BinParker的博客
02-18 406
图像的立体旋转
Day28 首页汇总方块点击导航功能
最新发布
build2024
06-06 101
本章节，实现了右键双击 首页汇总方块的时候，跳转到对应的待办事项或备忘录视图页面 在 IndexViewModel 中，给 TaskBar 里面 Target 属性，赋上要跳转的页面 创建汇总方块导航事件命令 实现导航事件命令处理逻辑时，首先获取 IRegionManager实例中的Regions属性，指定目标视图应当呈现的具体区域位置。接着，利用RequestNavigate 方法触发导航事件，跳转到对应的目标页面 当前需要注意一点，已完成方块或汇总方块，由于这2个方块的数据来源和呈
jQuery+CSS3实现四种导航条效果详解
本文主要介绍了如何使用jQuery和CSS3技术来创建四种常见的导航条样式，包括高亮显示、中英文切换、弹性动画和摩擦运动动画的导航条。这些导航条设计广泛应用于各种网站，旨在提升用户体验，提供清晰的页面导航。 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值