css动态导航栏鼠标悬停特效

news2025/1/19 17:23:09

@charset "utf-8";
/*科e互联特效基本框架CSS*/
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 14px "微软雅黑"; }
ul, ol, li {list-style-type:none;vertical-align:0}
a {outline-style:none;color:#535353;text-decoration:none}
a:hover { color: #D40000; text-decoration: none}
.clear{height:0; overflow:hidden; clear:both}
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top,  #ed1c24,  #A51715);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top,  #c9151b,  #a11115); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
.cor_bs,.cor_bs:hover{color:#ffffff;}
.keBody{background:url(../images/bodyBg.jpg) repeat #333;}
.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(../images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal}
.kePublic{ background: url(../dark_wood.png) 0 0 repeat; padding: 100px 0px; text-align: center; }
.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; background:url(../images/bodyBg2.jpg) repeat-x top left; padding-bottom:25px}
.keTxtP{font-size:16px; color:#ffffff;}
.keUrl{color:#FFF; font-size:30px;}
.keUrl:hover{ text-decoration: underline; color: #FFF; }
.mKeBanner,.mKeBanner div{text-align:center;}
/*科e互联特效基本框架CSS结束,应用特效时,以上样式可删除*/
/* 效果CSS开始 */
body { margin: auto; text-align: center; }
.ribbon { display: inline-block; }
.ribbon:after, .ribbon:before { margin-top: 0.5em; content: ""; float: left; border: 1.5em solid #fff; }
.ribbon:after { border-right-color: transparent; }
.ribbon:before { border-left-color: transparent; }
.ribbon a:link, .ribbon a:visited { color: #000; text-decoration: none; float: left; height: 3.5em; overflow: hidden; }
.ribbon span { background: #fff; display: inline-block; line-height: 3em; padding: 0 1em; margin-top: 0.5em; position: relative; -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; }
.ribbon a:hover span { background: #FFD204; margin-top: 0; }
.ribbon span:before { content: ""; position: absolute; top: 3em; left: 0; border-right: 0.5em solid #9B8651; border-bottom: 0.5em solid #fff; }
.ribbon span:after { content: ""; position: absolute; top: 3em; right: 0; border-left: 0.5em solid #9B8651; border-bottom: 0.5em solid #fff; }
/* 效果CSS结束 */

背景图

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

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

相关文章

【c++入门】函数重载,引用,内联函数,auto

函数重载 函数重载概念 什么是函数重载? 函数重载:是函数的一种特殊情况,C允许在同一作用域中声明几个功能类似的同名函数,这些同名函数的形参列表(参数个数 或 类型 或 类型顺序)不同,常用来处理实现功能类似数据类…

3D开发工具HOOPS助力PLM/PDM系统创新,高效实现复杂数据精细处理、3D模型交互可视化!

在现代制造和工程领域,PLM(产品生命周期管理)和PDM(产品数据管理)已成为企业优化流程和提升竞争力的关键工具。 随着技术的飞速发展,PLM和PDM应用程序需要更先进的工具来处理复杂的CAD数据、实现高效的3D可…

揭秘!宠物空气净化器对抗猫毛过敏,效果真的超乎想象?

猫毛过敏困扰着不少爱猫人士。尽管网络上充斥着各种缓解策略,但究竟哪种方法效果最佳?作为一位经验丰富的宠物主人,我搜集了大量信息,对比了几种主流的猫毛过敏应对策略,比如药物治疗、日常清洁和宠物空气净化器的使用…

电子凭证3.0,助力企业实现报销自动化

在数字化浪潮汹涌澎湃的今天,企业对于高效、便捷、安全的财务管理需求日益凸显。传统的报销流程繁琐、耗时,不仅增加了企业的运营成本,还影响了员工的工作效率和满意度。用友BIP电子凭证3.0的发布,无疑为企业实现报销自动化提供了…

Nginx配置详细解释

文章目录 一、配置详细解释关闭版本修改启动的进程数cpu与work进程绑定nginx进程的优先级work进程打开的文件个数event事件 二、Http设置协议配置说明mime虚拟主机aliaslocationaccess模块验证模块自定义错误页面自定义日志存放位置try_files检测文件是否存在长连接 一、配置详…

Android Studio插件开发 - Dora SDK的IDE插件

IDE插件开发简介 Android Studio是一种常用的集成开发环境(IDE),用于开发Android应用程序。它提供了许多功能和工具,可以帮助开发人员更轻松地构建和调试Android应用程序。 如果你想开发Android Studio插件,以下是一…

计算病理学的视觉语言基础模型| 文献速递-视觉通用模型与疾病诊断

Title 题目 A visual-language foundation model for computational pathology 计算病理学的视觉语言基础模型 01 文献速递介绍 数字病理学的快速普及和深度学习的进步使得可以开发出针对各种疾病和患者群体的各种病理学任务的强大模型。然而,由于医学领域标签…

解锁破解2024最新版会声会影,序列号注册码大揭秘!

会声会影2024是一款专业的视频编辑软件,它为用户提供了丰富的功能和工具,让用户能够轻松地制作出精美的视频作品。如果你是一位热爱视频制作的朋友,那么你一定不能错过这款软件。本文将为大家介绍会声会影2024的序列号注册码以及如何购买和使…

安徽某高校数据挖掘作业4-5 (与一些碎碎念)

1. 编写程序求函数、、的极限。 解答: import sympy as sp# 定义符号变量 x x sp.symbols(x)# 定义函数 f1 sp.sin(20 * x) / x f2 (1 4 * x)**(2 / x) f3 (1 4 / x)**(2 * x)# 计算极限 limit1 sp.limit(f1, x, 0) limit2 sp.limit(f2, x, 0) limit3 sp…

文件上传漏洞之upload-labs

前提: 本文中的以xshell命名的均为以密码为admin的一句话木马,而shell命名的则是由冰蝎工具生成的木马。 pass-01:js前端验证 测试性的上传一个一句话木马,发现被拦截了,而且根据推测大概率是前端检测,于…

开发人员申请Claude API Key教程:轻松获取Claude 3模型API Key并开发部署自己的Claude 3聊天应用

开发者如何申请并使用ClaudeAPI开发部署自己的Claude 3聊天应用 ClaudeAPI是由Anthropic公司开发的一款基于Claude模型的自然语言处理API服务。它可以帮助开发者在自己的应用中集成先进的自然语言理解和生成能力。本文将介绍如何申请和使用ClaudeAPI。 一、注册Anthropic账号 …

订单排队与链动模式塑造社交电商新格局

在数字化浪潮中,社交电商凭借其独特的魅力与潜力,正逐渐崭露头角。本文将解读一种融合了订单排队与链动模式的创新商业模式。这一模式旨在通过提高消费者复购率,优化销售流程,从而推动销售增长,塑造社交电商新生态。 …

【栈】736. Lisp 语法解析

本文涉及知识点 栈 LeetCode736. Lisp 语法解析 给你一个类似 Lisp 语句的字符串表达式 expression,求出其计算结果。 表达式语法如下所示: 表达式可以为整数,let 表达式,add 表达式,mult 表达式,或赋值的变量。表达…

Nacos注册中心 --学习笔记

Nacos注册中心是什么? 想象一下一个繁忙的购物中心,里面有很多商店,每个商店都在某个位置提供不同的商品或服务。这个购物中心有一个信息台,人们可以在这里查询任何商店的位置和提供的服务。等到有新的商店开张,或者现…

运维工具 - SFTP 和 FTP 的区别?

SFTP 和 FTP 的区别有三点 连接方式 SFTP 是在客户端和服务器之间通过 SSH 协议建立的安全连接来传输文件,而 FTP 则是 TCP 端口 21 上的控制连接建立连接。 安全性 SFTP 使用加密传输认证信息来传输数据,因此 SFTP 相对于 FTP 更安全的。 效率 SF…

DevOps全面综述:从概念到实践

一、背景与概述 1.1 DevOps的起源与发展 DevOps(Development and Operations的缩写)是软件工程领域中的一种文化和实践方法,旨在促进开发团队与运维团队之间的协作,从而实现更高效、更可靠的软件交付。DevOps起源于敏捷软件开发方…

应届生毕业择业必看!这三个朝阳行业错过就晚了!2024普通人赚钱的行业、2024最适合创业的项目

俗话说“男怕入错行,女怕嫁错郎”。尤其是对于现在的年轻人来说,一个好的处于上升期的行业,所能带来的收益是无法估量的。所以在这个大学生即将步入社会的毕业季,我们一起看看国家统计局发布的这份数据报告,来分析哪些…

机器学习18个核心算法模型

1. 线性回归(Linear Regression) 用于建立自变量(特征)和因变量(目标)之间的线性关系。 核心公式: 简单线性回归的公式为: , 其中 是预测值, 是截距, 是斜…

动态规划——浅谈dp如何入门,以及入门题目(值得收藏,持续更新)

前言 动态规划如何入门?如果你问我怎么精通,那我只能告诉你我也不知道,但你要问我怎么入门,那我就可以和你说道说道了. 我并没有能力也不想说你看完就会了,我只是想给大家开个头,你只要知道怎么写了怎么去思考了,你就可以通过刷题来强化思维了,能走多远就看各位的造化了! 动…

【全开源】知识库文档系统(ThinkPHP+FastAdmin)

📚知识库文档系统:解锁知识的无限可能 一款基于ThinkPHPFastAdmin开发的知识库文档系统,可用于企业工作流程的文档管理,结构化记录沉淀高价值信息,形成完整的知识体系,能够轻松提升知识的流转和传播效率&a…