30 3D导航栏

效果演示

在这里插入图片描述

实现了一个导航栏,其中包含了五个图标,每个图标都有一个悬浮的文字标签,当鼠标悬停在图标上时,文字标签会旋转并向上移动,同时底部会出现一个阴影效果。整个导航栏的背景颜色为浅灰色。

Code

<ul><li><span class="iconfont icon-QQ"></span><span class="iconfont icon-QQ"></span></li><li><span class="iconfont icon-weixin"></span><span class="iconfont icon-weixin"></span></li><li><span class="iconfont icon-douyin"></span><span class="iconfont icon-douyin"></span></li><li><span class="iconfont icon-xinlangweibo"></span><span class="iconfont icon-xinlangweibo"></span></li><li><span class="iconfont icon-shouji"></span><span class="iconfont icon-shouji"></span></li>
</ul>
@font-face {font-family: "iconfont";/* Project id 4096975 */src: url('//at.alicdn.com/t/c/font_4096975_pswyqyk8tdo.woff2?t=1685517797434') format('woff2'),url('//at.alicdn.com/t/c/font_4096975_pswyqyk8tdo.woff?t=1685517797434') format('woff'),url('//at.alicdn.com/t/c/font_4096975_pswyqyk8tdo.ttf?t=1685517797434') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-xinlangweibo:before {content: "\e600";
}.icon-shouji:before {content: "\e601";
}.icon-weixin:before {content: "\e602";
}.icon-jingdong:before {content: "\e812";
}.icon-taobao:before {content: "\e755";
}.icon-shoujitaobao:before {content: "\e786";
}.icon-alipay:before {content: "\e618";
}.icon-QQ:before {content: "\e882";
}.icon-douyin:before {content: "\e8db";
}.icon-pinduoduo:before {content: "\e8df";
}/* 1.去除默认样式 设置底色 */
* {margin: 0;padding: 0;
}body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #e8e8e8;
}/* 2.准备导航的基本样式 */
ul {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: flex;list-style: none;
}/* 3.1 准备导航里面图标的基本样式 */
ul li {position: relative;margin: 0 2px;width: 40px;height: 40px;
}ul li span {position: absolute;top: 0;left: 0;width: 100%;height: 100%;line-height: 40px;font-size: 16px;background: #fff;color: #262626;transform-origin: top;text-align: center;cursor: pointer;
}ul li span:nth-child(2) {background: #3b5999;color: #fff;transform-origin: bottom;transform: rotateX(90deg) translateY(50%);
}/* 3.1.1 鼠标悬停 旋转 上移 */
ul li span {transition: all 0.5s;
}ul li span:nth-child(1) {transform-origin: top;
}ul li:hover span:nth-child(1) {transform: rotateX(90deg) translateY(-50%);
}ul li:hover span:nth-child(2) {transform: rotateX(0deg) translateY(0);
}ul li:hover {transform: translateY(-10px);
}/* 3.2 导航下面图标的底色 */
ul li:nth-child(1) span:nth-child(2) {background: #3b5999;
}ul li:nth-child(2) span:nth-child(2) {background: #05e07a;
}ul li:nth-child(3) span:nth-child(2) {background: #dd4b39;
}ul li:nth-child(4) span:nth-child(2) {background: #b50088;
}ul li:nth-child(5) span:nth-child(2) {background: #d9e440;
}*//* 4. 添加底部的阴影效果 */
ul li::before {content: "";position: absolute;left: 0;bottom: -10px;width: 40px;height: 8px;background: #000;border-radius: 50%;transition: .5s;opacity: 0;filter: blur(2px);transform: scale(0.8);}ul li:hover::before {transition-delay: .5s;opacity: .2;transform: scale(1);
}

实现思路拆分

@font-face {font-family: "iconfont";/* Project id 4096975 */src: url('//at.alicdn.com/t/c/font_4096975_pswyqyk8tdo.woff2?t=1685517797434') format('woff2'),url('//at.alicdn.com/t/c/font_4096975_pswyqyk8tdo.woff?t=1685517797434') format('woff'),url('//at.alicdn.com/t/c/font_4096975_pswyqyk8tdo.ttf?t=1685517797434') format('truetype');
}

这段代码定义了一个名为"iconfont"的字体,它来自于阿里云的字体库。

.iconfont {font-family: "iconfont"!important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

这段代码定义了一个名为"iconfont"的类,它继承了阿里云字体库中的字体。

.icon-xinlangweibo:before {content: "\e600";
}

这段代码定义了一个名为"icon-xinlangweibo"的伪元素,它的内容是"\e600",这是一个阿里云字体库中的图标。

.icon-shouji:before {content: "\e601";
}

这段代码定义了一个名为"icon-shouji"的伪元素,它的内容是"\e601",这是一个阿里云字体库中的图标。

.icon-weixin:before {content: "\e602";
}

这段代码定义了一个名为"icon-weixin"的伪元素,它的内容是"\e602",这是一个阿里云字体库中的图标。

.icon-jingdong:before {content: "\e812";
}

这段代码定义了一个名为"icon-jingdong"的伪元素,它的内容是"\e812",这是一个阿里云字体库中的图标。

.icon-taobao:before {content: "\e755";
}

这段代码定义了一个名为"icon-taobao"的伪元素,它的内容是"\e755",这是一个阿里云字体库中的图标。

.icon-shoujitaobao:before {content: "\e786";
}

这段代码定义了一个名为"icon-shoujitaobao"的伪元素,它的内容是"\e786",这是一个阿里云字体库中的图标。

.icon-alipay:before {content: "\e618";
}

这段代码定义了一个名为"icon-alipay"的伪元素,它的内容是"\e618",这是一个阿里云字体库中的图标。

.icon-QQ:before {content: "\e882";
}

这段代码定义了一个名为"icon-QQ"的伪元素,它的内容是"\e882",这是一个阿里云字体库中的图标。

.icon-douyin:before {content: "\e8db";
}

这段代码定义了一个名为"icon-douyin"的伪元素,它的内容是"\e8db",这是一个阿里云字体库中的图标。

.icon-pinduoduo:before {content: "\e8df";
}

这段代码定义了一个名为"icon-pinduoduo"的伪元素,它的内容是"\e8df",这是一个阿里云字体库中的图标。

* {margin: 0;padding: 0;
}

这段代码是用来清除默认的外边距和内边距的。

body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #e8e8e8;
}

这段代码是用来设置页面的高度、居中显示、背景颜色等样式的。

ul {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: flex;list-style: none;
}

这段代码是用来设置导航栏的位置、居中显示、列表样式等样式的。

ul li {position: relative;margin: 0 2px;width: 40px;height: 40px;
}

这段代码是用来设置导航栏中的每个图标的位置、间距、宽度、高度等样式的。

ul li span {position: absolute;top: 0;left: 0;width: 100%;height: 100%;line-height: 40px;font-size: 16px;background: #fff;color: #26262626;transform-origin: top;text-align: center;cursor: pointer;
}

这段代码是用来设置导航栏中的每个图标的文本样式、背景颜色、字体大小、对齐方式等样式的。

ul li span:nth-child(2) {background: #3b5999;color: #fff;transform-origin: bottom;transform: rotateX(90deg) translateY(50%);
}

这段代码是用来设置导航栏中的第一个图标的悬浮文字的样式、背景颜色、字体大小、对齐方式等样式的。

ul li::before {content: "";position: absolute;left: 0;bottom: -10px;width: 40px;height: 8px;background: #000;border-radius: 50%;transition:.5s;opacity: 0;filter: blur(2px);transform: scale(0.8);
}

这段代码是用来设置导航栏中的每个图标的悬浮阴影的样式、位置、大小、背景颜色、圆角半径、过渡效果、透明度、模糊效果、缩放效果等样式的。

ul li:hover::before {transition-delay:.5s;opacity:.2;transform: scale(1);
}

这段代码是用来设置导航栏中的每个图标悬浮时悬浮阴影的过渡效果、透明度、缩放效果等样式的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/623333.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 字典的基础及应用

当前版本&#xff1a; Python 3.8.4 简介 字典是一种无序的、可变的、键值对的数据结构。通常用于存储键值对&#xff0c;其中键是唯一的&#xff0c;值可以是任何类型的对象。它可以快速查找和访问数据&#xff0c;关联相互有关的信息&#xff0c;灵活地添加、修改和删除数据…

QT+OSG/osgEarth编译之七十六:glsl+Qt编译(一套代码、一套框架,跨平台编译,版本:OSG-3.6.5插件库osgdb_glsl)

目录 1、osgdb_glsl介绍 2、文件分析 3、pro文件 4、编译实践 1、osgdb_glsl介绍 通过osgdb_glsl,osg能方便地读取glsl着色语言,从而为三维场景的渲染提供支撑。 GLSL(OpenGL Shadi

Day03

今日任务 链表理论基础203.移除链表元素707.设计链表206.反转链表 链表理论基础 1&#xff09;单链表 单链表中的指针域只能指向节点的下一个节点 2&#xff09;双链表 双链表&#xff1a;每一个节点有两个指针域&#xff0c;一个指向下一个节点&#xff0c;一个指向上一个…

k8s云原生环境搭建笔记——第二篇

目录 1、使用普通方式安装prometheus和grafana1.1、安装kube-state-metrics容器1.1.1、下载并修改yaml文件1.1.2、导入kube-state-metrics镜像1.1.3、执行yaml文件目录 1.2、安装node-exploer1.2.1、创建名称空间prometheus1.2.2、执行yaml 1.3、安装prometheus1.3.1、创建集群…

QT上位机开发(动画效果)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 不管是仿真&#xff0c;还是对真实环境的一比一模拟&#xff0c;动画都是非常好的一种呈现方式。目前在qt上面&#xff0c;实现动画主要有两种方法…

js(JavaScript)数据结构之堆(Heap)

什么是数据结构&#xff1f; 下面是维基百科的解释&#xff1a; 数据结构是计算机存储、组织数据的方式。数据结构意味着接口或封装&#xff1a;一个数据结构可被视为两个函数之间的接口&#xff0c;或者是由数据类型联合组成的存储内容的访问方法封装。 我们每天的编码中都会…

Linux scp命令 服务器之间通讯

目录 一. scp命令简介二. 本地服务器文件传输到远程服务器三. 本地服务器文件夹传输到远程服务器 一. scp命令简介 scp&#xff08;Secure Copy Protocol&#xff09;是用于在Unix或Linux系统之间安全地复制文件或目录的命令。 它使用SSH&#xff08;Secure Shell&#xff09;…

Java基础-OJ

Java基础-OJ Java面向对象程序设计OJ题目 目录 Java基础-OJJava基础-回文数Java基础-计算奇数和Java基础-计算素数Java基础-设计分段函数Java数组-歌手打分Java数组-实现冒泡排序Java继承-类的继承Java类的组合-类的组合Java类及对象-类方法使用Java面向对象-编写汽车类Java面向…

如何通过Burp Suite专业版构建CSRF PoC

Burp Suite是一款强大的渗透测试利器&#xff0c;可以利用它来高效的执行渗透攻击&#xff0c;接下来介绍如何通过Burp Suite Pro来构建CSRF PoC。 在Bupr中找到拦截的请求&#xff0c;右键选择Engagement tools > Generate CSRF PoC 利用CSRF PoC生成器自动生成HTML <h…

MOJO语言的诞生

文章目录 背景目标现状 背景 传统的编译器技术如LLVM和GCC并不适合现有深度学习编程语言的发展迭代&#xff0c;无法完全支持现代芯片架构。如今&#xff0c;专用机器学习加速器的标准技术是MLIR。MLIR是一个相对较新的开源编译器基础架构&#xff0c;最初由Google&#xff08…

imgaug库指南(23):从入门到精通的【图像增强】之旅

引言 在深度学习和计算机视觉的世界里&#xff0c;数据是模型训练的基石&#xff0c;其质量与数量直接影响着模型的性能。然而&#xff0c;获取大量高质量的标注数据往往需要耗费大量的时间和资源。正因如此&#xff0c;数据增强技术应运而生&#xff0c;成为了解决这一问题的…

四、MySQL安装失败问题和可视化工具连接MySQL8问题

目录 安装问题1&#xff1a;无法打开MySQL8.0软件安装包&#xff1f; 安装问题2&#xff1a;需要C库 安装问题3&#xff1a;丢失MSVCP140.dll 可视化工具连接MySQL8问题 安装问题1&#xff1a;无法打开MySQL8.0软件安装包&#xff1f; 在运行MySQL8.0软件安装包之前&#xf…

江科大STM32 下

目录 ADC数模转换器DMA直接存储器存取USART串口9-2 串口发送接受9-3 串口收发HEX数据包 I2CSPI协议10.1 SPI简介W25Q64简介10.3 SPI软件读写W25Q6410.4 SPI硬件读写W25Q64 BKP、RTC11.0 Unix时间戳11.1 读写备份寄存器BKP11.2 RTC实时时钟 十二、PWR12.1 PWR简介12.2 修改主频1…

精品量化公式——“区域突破”,应对当下行情较好的主图看盘策略

不多说&#xff0c;直接上效果如图&#xff1a; ► 日线表现 代码评估 技术指标代码评估&#xff1a; VAR1, VAR2, VAR3&#xff1a;这些变量是通过指数移动平均&#xff08;EMA&#xff09;计算得出的。EMA是一种常用的技术分析工具&#xff0c;用于平滑价格数据并减少市场“…

Linux/Traverxec

Enumeration nmap 使用nmap快速扫描目标&#xff0c;发现对外开放了22和80&#xff0c;第一个问题就是问80端口运行的是什么服务&#xff0c;针对这两个端口扫描对应的详细信息后就能得到答案 Nostromo 从nmap的扫描结果可以看到&#xff0c;目标开启了80端口&#xff0c;且…

c++关键字const

C中的const是一种常量修饰符。在变量、函数参数和成员函数中使用const可以限制其对数据的修改。 const修饰的数据在定义时必须进行初始化&#xff0c;且不能被修改&#xff0c;因此使用const可以提高代码的安全性和可读性。在C中&#xff0c;const修饰的成员函数表示该函数保证…

《计算思维导论》笔记:10.2 什么是数据库与数据库系统?

《大学计算机—计算思维导论》&#xff08;战德臣 哈尔滨工业大学&#xff09; 《10.2 什么是数据库与数据库系统&#xff1f;》 数据库 简单来讲&#xff0c;数据库就是相互有关联关系的数据的集合。 一个表聚集了具有相同结构类型的若干个对象一行数据反映了某一对象的相关…

Leetcode3002. 移除后集合的最多元素数

Every day a Leetcode 题目来源&#xff1a;3002. 移除后集合的最多元素数 解法1&#xff1a;贪心 可以将数组去重后分为三个部分&#xff1a;nums1 独有的&#xff0c;nums2 独有的&#xff0c;nums1 与 nums2 共有的。 求集合 S 时&#xff1a; 先选择两个数组独有的。…

(七)Java 分支结构 —— if...else、switch

目录 一. 前言 二. if 分支 2.1. if 语句 2.2. if...else 语句 2.3. if...else if...else 语句 2.4. 嵌套的 if…else 语句 三. switch 分支 四. 课后习题 一. 前言 Java 中的分支结构是程序控制流的重要组成部分&#xff0c;它们允许程序根据特定条件执行不同的代码块…

JVM:双亲委派机制类加载器

JVM&#xff1a;双亲委派机制 1. 例子2. 类加载器总结3. 类加载过程4. 双亲委派模型的执行流程&#xff1a;5. 双亲委派模型的好处 1. 例子 Java运行时环境有一个java.lang包&#xff0c;里面有一个ClassLoader类 我们自定义一个String类在java.lang包下&#xff0c;下面的…