<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Slider</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to bottom, #1a1a2e, #16213e);
color: white;
}
.slider-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
width: 500px;
justify-content: space-evenly;
align-items: center;
}
.slider-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
width: 80px;
height: 80px;
background: #1f4068;
border-radius: 50%;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.slider-item:hover {
transform: scale(1.1);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}
.slider-item.active {
background: linear-gradient(to right, #ff7e5f, #feb47b); /* Attractive gradient for active */
transform: scale(1.2); /* Slightly larger size */
box-shadow: 0 8px 12px rgba(255, 126, 95, 0.5);
}
.slider-item i {
font-size: 28px;
color: white;
}
.slider-item span {
margin-top: 8px;
/* font-size: 8px; */
color: white;
text-align: center;
}
.label {
font-size: 12px;
margin-left: 15px;
color: white;
margin-top: 10px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="slider-container">
<div>
<div class="slider-item" onclick="toggleActive(this)">
<i class="fas fa-wifi"></i>
</div>
<span class="label">WiFi</span>
</div>
<div>
<div class="slider-item" onclick="toggleActive(this)">
<i class="fas fa-bell"></i>
</div>
<span class="label">Notification</span>
</div>
<div>
<div class="slider-item" onclick="toggleActive(this)">
<i class="fas fa-volume-up"></i>
</div>
<span class="label">Speaker</span>
</div>
<div>
<div class="slider-item" onclick="toggleActive(this)">
<i class="fas fa-signal"></i>
</div>
<span class="label">Mobile Data</span>
</div>
</div>
<script>
function toggleActive(element) {
const isActive = element.classList.contains('active');
document.querySelectorAll('.slider-item').forEach(item => item.classList.remove('active'));
if (!isActive) {
element.classList.add('active');
}
}
</script>
</body>
</html>
0
0
使用 html css 和 js 代码的导航栏图标选项 ui/ux
霞舞
发布时间：2024-12-24 22:48:14
|467人浏览过
|来源于dev.to
转载
相关文章
修复 clientHeight 在窗口缩放时无法动态减小的问题
修复 clientHeight 在窗口缩放时无法正确响应高度变化的问题
HTML 文件分离时 collapsible 无法折叠的解决方案
如何正确协调 mouseDown/mouseUp 与 hover 交互效果
如何正确协调鼠标按下、释放与悬停事件的样式优先级
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
js正则表达式
php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。
531
2023.06.20
js获取当前时间
JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。
576
2023.07.28
js 字符串转数组
js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。
761
2023.08.03
js是什么意思
JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。
6258
2023.08.17
js删除节点的方法
js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。
492
2023.09.01
js截取字符串的方法
js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。
221
2023.09.04
Js中concat和push的区别
Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。
240
2023.09.14
js截取字符串的方法介绍
JavaScript字符串截取方法，包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求，灵活地截取字符串的不同部分。在实际开发中，根据具体情况选择合适的方法进行字符串截取，能够提高代码的效率和可读性 。
303
2023.09.21
TypeScript类型系统进阶与大型前端项目实践
本专题围绕 TypeScript 在大型前端项目中的应用展开，深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析，帮助开发者构建类型安全、结构清晰、易维护的前端工程体系，提高团队协作效率与代码质量。
26
2026.03.13
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章
