网站通栏设计素材,怎样用盒子做汽车视频网站,风景旅游网页设计,站长之家网站素材效果展示 CSS 知识点 filter 属性回顾 transition 属性回顾 使用单选框实现导航菜单的思路 单选框当点击完成后就会有一个:checked属性#xff0c;可以利用这个属性来实现导航菜单底部滑动块的滑动动画和当前菜单项激活状态的管理。
整体页面结构
div classtab…效果展示 CSS 知识点 filter 属性回顾 transition 属性回顾 使用单选框实现导航菜单的思路 单选框当点击完成后就会有一个:checked属性可以利用这个属性来实现导航菜单底部滑动块的滑动动画和当前菜单项激活状态的管理。
整体页面结构
div classtabs!-- 单选 --input typeradio idhome nametabsMenu /input typeradio idprofile nametabsMenu /input typeradio idlikes nametabsMenu /input typeradio idsettings nametabsMenu /input typeradio idnotifications nametabsMenu /!-- 图标 --div classbuttonslabel forhomei classfa-solid fa-house/i/labellabel forprofilei classfa-solid fa-user/i/labellabel forlikesi classfa-solid fa-heart/i/labellabel forsettingsi classfa-sharp fa-solid fa-gear/i/labellabel fornotificationsi classfa-solid fa-bell/i/label!-- 滑块 --div classunderline/div/div
/div实现整体布局
.tabs input {visibility: hidden;display: none;
}.buttons {position: relative;display: flex;gap: 80px;padding: 30px 40px;border-bottom: 1px solid rgba(255, 255, 255, 0.2);background: #182d3c;overflow: hidden;border-radius: 20px;
}编写菜单图标激活后的样式
.buttons label {width: 20%;font-size: 1.75em;-webkit-text-stroke: 1px #fff;color: transparent;cursor: pointer;transition: 0.5s;
}.buttons label:hover {opacity: 1;filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff);
}/* 通过单选框激活状态设置图标的激活状态 */
.tabs input:nth-child(1):checked ~ .buttons label:nth-child(1),
.tabs input:nth-child(2):checked ~ .buttons label:nth-child(2),
.tabs input:nth-child(3):checked ~ .buttons label:nth-child(3),
.tabs input:nth-child(4):checked ~ .buttons label:nth-child(4),
.tabs input:nth-child(5):checked ~ .buttons label:nth-child(5) {color: #fff;opacity: 1;filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff);
}实现菜单底部块的样式和移动样式
.underline {position: absolute;left: 0;bottom: 0;width: 20%;height: 5px;/* 设置滑块的移动时间 */transition: 0.5s;
}.underline::before {content: ;position: absolute;left: 50%;transform: translateX(-50%);width: 40px;height: 100%;background: #fff;filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff) drop-shadow(0 0 30px #fff) drop-shadow(0 0 50px #fff);
}.underline::after {content: ;position: absolute;left: 50%;transform: translateX(-50%);width: 40px;height: 100%;background: #fff;filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff) drop-shadow(0 0 30px #fff) drop-shadow(0 0 50px #fff) blur(5px);
}/* 通过单选框激活状态设置滑块的移动距离 */
.tabs input:nth-child(1):checked ~ .buttons .underline {left: 0;
}.tabs input:nth-child(2):checked ~ .buttons .underline {left: 20%;
}.tabs input:nth-child(3):checked ~ .buttons .underline {left: 40%;
}.tabs input:nth-child(4):checked ~ .buttons .underline {left: 60%;
}.tabs input:nth-child(5):checked ~ .buttons .underline {left: 80%;
}完整代码下载
完整代码下载
