CSS3图标导航渐变背景切换特效.zip资源-CSDN文库

共3个文件

html：1个

js：1个

css：1个

版权申诉

jQuery特效

CSS特效

网页特效

44 浏览量 2023-10-14 23:57:44 上传评论收藏 36KB ZIP 举报

"CSS3图标导航渐变背景切换特效"是一个基于现代CSS3技术实现的网页设计元素，旨在提升用户体验和视觉吸引力。这个特效利用了CSS3的特性，为导航栏中的图标按钮添加了动态的渐变背景切换效果，使得用户在鼠标悬停或点击时，导航图标能够展现出丰富的色彩变化，增强互动性。提到，这是一个“非常实用好看的特效代码”，意味着它不仅美观，而且在实际应用中具有高度的可用性和实用性。同时，由于它可以“完美运行”，表明代码编写得当，没有明显的兼容性问题，能够在各种现代浏览器上顺畅运行。另外，提到可以“二次修改”，意味着这个特效是开放源代码的，开发者可以根据自己的需求进行定制和优化，以适应不同的项目需求。 "jQuery特效"，意味着这个特效可能结合了jQuery库，这是一种广泛使用的JavaScript库，简化了DOM操作、事件处理、动画效果等。jQuery使得开发者能更轻松地实现复杂的交互功能，而无需编写大量JavaScript代码。 "CSS特效"标签表明这个特效主要通过CSS样式来实现，CSS（层叠样式表）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言。在这个案例中，CSS3的新特性，如渐变、过渡和动画，被用来创建动态效果。 "网页特效"则涵盖了这个代码适用于网站开发的范围，意味着它可以在网页设计中作为提升用户体验的一种手段。在【压缩包子文件的文件名称列表】中，我们看到只有一个名为"jiaoben7067"的文件，这很可能是代码示例的源文件，包含了HTML结构、CSS样式和可能的jQuery脚本。为了实现这个特效，开发者可能在HTML中定义了导航栏的结构，用CSS来定义图标和背景的初始样式，然后使用CSS3的`transition`和`background-image`属性来创建渐变背景的过渡效果。如果涉及jQuery，那么在JavaScript部分可能包含了监听用户交互（如鼠标悬停或点击）的代码，以便在这些事件触发时改变图标的背景。 "CSS3图标导航渐变背景切换特效"是一个利用现代Web技术（CSS3和jQuery）创建的网页交互元素，其目的是提高网页的视觉吸引力和用户交互体验。通过这个特效，开发者可以轻松地为他们的网站增添一份独特的动态美感，同时保持良好的性能和可定制性。

资源推荐

资源详情

资源评论

收起资源包目录

CSS3图标导航渐变背景切换特效.zip （3个子文件）

jiaoben7067

jquery.min.js 91KB

css

style.css 2KB

index.html 7KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3图标导航渐变背景切换特效 - 【更多源码：www.96flw.com】</title>  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">  <link type="text/css" href="css/style.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body>  <div class="header"> <h1 class="header__title">梯度导航</h1> </div>  <div class="content"> <div class="content__section"> <h2 class="content__title">梯度方向</h2> <div class="content__section-inner"> <div class="btns"> <button class="btn grad-btn grad-btn--top" type="button" title="to top" data-dir="top"><i class="fas fa-long-arrow-alt-right"></i></button> <button class="btn grad-btn grad-btn--left" type="button" title="to left" data-dir="left"><i class="fas fa-long-arrow-alt-right"></i></button> <button class="btn btn--sm grad-btn grad-btn--bottom" type="button" title="to bottom" data-dir="bottom"><i class="fas fa-long-arrow-alt-right"></i></button> <button class="btn btn--sm grad-btn" type="button" title="to right" data-dir="right"><i class="fas fa-long-arrow-alt-right"></i></button> <button class="btn btn--sm grad-btn grad-btn--top-left" type="button" title="to top left" data-dir="top left"><i class="fas fa-long-arrow-alt-right"></i></button> <button class="btn btn--sm grad-btn grad-btn--top-right js-active" type="button" title="to top right" data-dir="top right"><i class="fas fa-long-arrow-alt-right"></i></button> <button class="btn btn--sm grad-btn grad-btn--bottom-left" type="button" title="to bottom left" data-dir="bottom left"><i class="fas fa-long-arrow-alt-right"></i></button> <button class="btn btn--sm grad-btn grad-btn--bottom-right" type="button" title="to bottom right" data-dir="bottom right"><i class="fas fa-long-arrow-alt-right"></i></button> </div> </div> </div> <div class="content__section"> <div class="content__section-inner nav-area" data-gradient="#00fff0, #5c9ff7 40%, #d322ff 80%" data-gradient-direction="right top"> <div class="nav-area__item"> <div class="nav-area__item-icon"><i class="fas fa-home"></i></div> <div class="nav-area__item-title"> <p>网站首页</p> </div> </div> <div class="nav-area__item"> <div class="nav-area__item-icon"><i class="fas fa-user"></i></div> <div class="nav-area__item-title"> <p>公司简介</p> </div> </div> <div class="nav-area__item"> <div class="nav-area__item-icon"><i class="fas fa-cog"></i></div> <div class="nav-area__item-title"> <p>系统设置</p> </div> </div> <div class="nav-area__item"> <div class="nav-area__item-icon"><i class="fas fa-credit-card"></i></div> <div class="nav-area__item-title"> <p>付款方式</p> </div> </div> <div class="nav-area__item"> <div class="nav-area__item-icon"><i class="fas fa-phone-alt"></i></div> <div class="nav-area__item-title"> <p>联系我们</p> </div> </div> <div class="nav-area__item"> <div class="nav-area__item-icon"><i class="fas fa-comment"></i></div> <div class="nav-area__item-title"> <p>技术支持</p> </div> </div> </div> </div> </div> <script> const nav = document.querySelector('.nav-area'); const navItems = document.querySelectorAll('.nav-area__item'); //grabbing gradient value const gradValue = () => { return nav.dataset.gradient; }; //grabbing gradient direction const gradDir = () => { return nav.dataset.gradientDirection; }; //building a gradient image const buildGrad = (value, direction) => { return `to ${direction}, ${value}`; }; //calc background-size const gradSize = () => { //get number of columns let firstItemPosX = navItems[0].getBoundingClientRect().left; let cols = 1; for (let i = 1; i < navItems.length; i++) { if (navItems[i].getBoundingClientRect().left > firstItemPosX) { cols++; } else { break; } } //get number of rows let itemPosY = navItems[0].getBoundingClientRect().top; let rows = 1; for (let i = 1; i < navItems.length; i++) { if (navItems[i].getBoundingClientRect().top > itemPosY) { rows++; itemPosY = navItems[i].getBoundingClientRect().top; } } // get size of 1 item const itemWidth = navItems[0].offsetWidth; const itemHeight = navItems[0].offsetHeight; //get gradient size let gradSizeX = itemWidth * cols; let gradSizeY = itemHeight * rows; return [gradSizeX, gradSizeY, cols, rows]; }; // add col and row for every item const colRow = () => { let row = 1; let col = 1; let xItemPos = navItems[0].getBoundingClientRect().left; //setting cols for (let i = 0; i < navItems.length; i++) { if (navItems[i].getBoundingClientRect().left > xItemPos) { col++; } else { col = 1; } navItems[i].dataset.col = col; } //setting rows let yItemPos = navItems[0].getBoundingClientRect().top; for (let i = 0; i < navItems.length; i++) { if (navItems[i].getBoundingClientRect().top > yItemPos) { row++; yItemPos = navItems[i].getBoundingClientRect().top; } navItems[i].dataset.row = row; } }; //setting gradient styles const setGrad = elem => { //background image style const bgImg = `linear-gradient(${buildGrad(gradValue(), gradDir())})`; elem.style.backgroundImage = bgImg; //background size style const bgSizeX = `${gradSize()[0]}`; const bgSizeY = `${gradSize()[1] + 5}`; elem.style.backgroundSize = `${bgSizeX}px ${bgSizeY}px`; //background position style const bgPosX = bgSizeX * (elem.dataset.col - 1) / gradSize()[2]; const bgPosY = bgSizeY * (elem.dataset.row - 1) / gradSize()[3]; elem.style.backgroundPosition = `${-bgPosX}px ${-bgPosY}px`; }; //setting gradient styles function const setGradientBg = () => { navItems.forEach(elem => { colRow(); setGrad(elem); }); }; //setting gradient onload setGradientBg(); //recalc and set gradient on resize window.addEventListener('resize', setGradientBg); //rebuild grad on direction button click const dirBtns = document.querySelectorAll('.grad-btn'); dirBtns.forEach(elem => { elem.addEventListener('click', () => { //setting new direction const dir = elem.dataset.dir; nav.dataset.gradientDirection = dir; //recalc background setGradientBg(); //make clicked btn active dirBtns.forEach(elem => elem.classList.remove('js-active')); elem.classList.add('js-active'); }); }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉