2.五彩导航例子

最新推荐文章于 2024-03-25 19:44:06 发布
最新推荐文章于 2024-03-25 19:44:06 发布
阅读量7.8k 收藏 9
点赞数 11
分类专栏： Div+Css 文章标签： 导航 图片按钮 动态按钮 前端 行高
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/neilro/article/details/79053114
版权

素材：



效果图：



代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>五彩导航</title>
		<style type="text/css">
			.nav .one:link{
				/*将行内元素转为行内块元素*/
				display: inline-block;
				/*设置大小*/
				width:120px;
				height:58px;
				/*插入图片*/
				background:url("images/bg1.png");
				/*改字体颜色*/
				color:white;
				/*去掉下划线*/
				text-decoration: none;
				/*文字居中*/
				text-align: center;
				/*设置行高*/
				line-height:50px;
			}
			.nav .one:hover{
				background: url("images/bg2.png");
			}
			
			.nav .two:link{
				display: inline-block;
				width:120px;
				height:58px;
				background:url("images/bg3.png");
				color:white;
				text-decoration: none;
				text-align: center;
				line-height: 50px;
			}
			.nav .two:hover{
				background:url("images/bg4.png");
			}
			
			.nav .three:link{
				display: inline-block;
				width:120px;
				height: 58px;
				background:url("images/bg5.png");
				text-decoration: none;
				color:white;
				text-align: center;
				line-height: 50px;
			}
			.nav .three:hover{
				background:url("images/bg6.png");
			}
			
			.nav .four:link{
				display:inline-block;
				width: 120px;
				height: 58px;
				text-align:center;
				text-decoration: none;
				background:url("images/bg4.png");
				color:white;
				line-height: 50px;
			}
			.nav .four:hover{
				background:url("images/bg7.png");
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="#" class="one">五彩导航</a>
			<a href="#" class="two">五彩导航</a>
			<a href="#" class="three">五彩导航</a>
			<a href="#" class="four">五彩导航</a>
		</div>
	</body>
</html>


重点难点：

☆如果没有设置行高line-height的话，会出现如黄色框这样的效果：


通过设置行高line-height:50px（可以根据具体需要，来调高度）即可达到后面几个色块的效果。

neilro
关注
  • 11
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML/CSS编写五彩导航
m0_58822480的博客
06-09 3291
代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>五彩导航</title> <style type="text/css"> .nav .one:link{ display: inline-block; width:120px; height:58px; background:url("bg1.pn
css实现五彩导航栏
m0_74355247的博客
07-25 450
【代码】css实现五彩导航栏。
【web前端】五彩导航
m0_62608983的博客
01-24 451
1.效果图 2.代码 只有转为行内块才能设置宽高等 3.结构
DAY004-CSS基础
qq_45579661的博客
08-03 353
1.思维导图 2.作业+练习 可参考 a.导航栏+hover b.侧边栏+hover 例： <!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"conten...
Web前端笔记+表单练习+五彩导航
Venchill的博客
03-22 1042
表单：数据交互的一种方式登录、注册、搜索<from><input type="text"> --- 普通输入框，内容在一行显示<input type="password"> --- 密码框<input type="radio">男 --- 单选框eg：性别<input type="radio">男 等等name属性，表明是一组单选eg：<input type="radio"name="sex">男<input type="radio"name="sex">女。
前三次笔记、表单和五彩导航
Michael_LDZ的博客
03-25 572
<input type="radio" name="sex" value="nan">男</label><label><input type="radio" name="sex" value="nv">女五彩导航
五彩科技ppt模板.rar
09-11
2. 世界地图背景：适合展示全球化信息，如科技项目的全球布局、市场分布等。 3. 扩散关系图表：用于描绘科技趋势、产品市场渗透或概念传播的过程。 4. 并列关系图表：帮助表达不同观点、数据或概念之间的对比和关联...
五彩导航电影影评博客网站模板
11-06
【五彩导航电影影评博客网站模板】是一个专为电影爱好者和博主设计的网页模板，旨在提供一个专业且美观的平台来分享电影评论和个人见解。这个模板采用了现代化的设计风格，结合了五彩缤纷的元素，使得网站在视觉上...
PPT模板-五彩缤纷.pptx
09-07
#### 2. 五彩缤纷模板的特点 “五彩缤纷”这个名称暗示了该模板可能采用了丰富多彩的颜色设计，旨在吸引观众的注意力并使演示内容更加生动有趣。这类模板通常适用于创意行业、教育演示或任何需要强调视觉效果的场合...
五彩科技PPT模板.ppt
02-08
【五彩科技PPT模板】是一款专为商务演示设计的精美模板，旨在帮助用户通过高质量的视觉呈现提升演示的专业性和吸引力。这款模板以其独特的色彩搭配、现代化的设计风格以及丰富的图表元素，展现了科技与创新的氛围，...
色影空间上网导航(极致美化版)
06-23
后台管理登录: http://你的网址/web/admin/index.asp 管理员：admin 密码：admin888
HTML页面设计之导航条样式
11-19
HTML页面设计之导航条样式的一些导航条样式、代码供应
导航菜单图片.zip
04-22
导航菜单 菜单图片 菜单图标，漂亮的工具图片
五彩缤纷的秋天.doc
09-19
2. 自然景象：秋天的天空湛蓝，田野里稻谷、高粱、棉花等农作物成熟，呈现出金黄、红色和白色的色彩，同时，大雁南飞，这些都是秋季特有的自然景观。 3. 农业生产：秋天是收获的季节，农民伯伯在这个时候收割水稻、...
web前端学习126-127（综合案例：五彩导航）
weixin_51249285的博客
01-12 4493
文章目录综合案例案例： 五彩导航小插曲： 综合案例 案例： 五彩导航 展示效果：五彩的导航，当鼠标经过的时候会变换颜色 练习价值：(下面的也可以看成是步骤) 链接属于行内元素,但是此时需要宽度高度,因此需要模式转换成行内块元素 里面文字需要水平居中和垂直居中.因此需要单行文字垂直居中的代码. 链接里面需要设置背景图片.因此需要用到背景的相关属性设置. 鼠标经过变化背景图片,因此需要用到链接伪类选择器. 回顾之前的快捷键 .nav+Enter键=<div class="nav"></d
css案例练习：五彩导航
xuan971130的博客
03-05 1187
<!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"> <title&...
【纯html+css垂直导航栏代码】
weixin_52218117的博客
07-18 4735
【纯html+css垂直导航栏代码】
实现五彩标题，即每个span设置的字呈现不同的颜色
qq_51730402的博客
11-02 4076
实现五彩标题，即每个span设置的字呈现不同的颜色
CSS五彩导航
m0_58425326的博客
05-25 295
五彩导航
three.js 粒子，五彩烟花升空后绽放
最新发布
06-14
Three.js 是一个非常流行的 JavaScript 三维图形库，它为 web 开发者提供了丰富的工具和API，用于创建交互式的 3D 场景，包括粒子系统。在 Three.js 中，粒子系统（Particle System）是一种常用的效果，可以用来模拟各种动态效果，如火焰、烟雾、雪花或五彩烟花等。 当你在 Three.js 中创建一个五彩烟花升空并绽放的场景，通常会这样操作： 1. **创建粒子系统**：首先，你需要实例化一个 `THREE.Points` 或 `THREE.Geometry` 对象，并设置一个粒子材质（Material），这个材质可能包含颜色和速度信息。 ```javascript const particleCount = 1000; const geometry = new THREE.Geometry(); const material = new THREE.PointsMaterial({ color: 0xffffff, // 白色 size: 10, // 粒子大小 blending: THREE.AdditiveBlending, // 用于颜色叠加 transparent: true, }); const particles = new THREE.Points(geometry, material); ``` 2. **添加随机性和变化**：为了模拟烟花效果，粒子的位置、颜色、速度等属性需要随机生成。你可以使用 `Random` 类或者 JavaScript 的 Math.random() 函数来实现。 ```javascript for (let i = 0; i < particleCount; i++) { const x = Math.random() * width; const y = height + Math.random() * 100; // 烟花从底部升起 const z = Math.random() * 200; // 高度范围 geometry.vertices.push(new THREE.Vector3(x, y, z)); } ``` 3. **动画和升空**：创建一个 `THREE.AnimationMixer` 或者 `THREE.KeyframeAnimation` 来控制粒子的运动，比如让它们随时间逐渐升高和绽放。 4. **添加动画帧**：定义关键帧，调整粒子的位置和颜色，使其看起来像烟花绽放。 5. **渲染与更新**：将粒子添加到场景中，然后在渲染循环中（`renderer.render()`）更新粒子的位置，并确保将它们添加到相机视野内。 ```javascript function animate() { requestAnimationFrame(animate); mixer.update(); // 更新动画 renderer.render(scene, camera); } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值