动画标签 HTML CSS JavaScript

2022-09-06 00:31:03 阅读：390 来源： 互联网

标签：颜色 rgba JavaScript HTML tab active 15px CSS 255

动画标签 HTML CSS JavaScript

HTML：

 <link  
 rel="样式表"  
 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"  
 完整性="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="  
 crossorigin="匿名"  
 referrerpolicy="无推荐人"  
 />  
 <link rel="stylesheet" href="./style.css" />  
 <title>动画标签</title>  
 </head>  
 <body>  
 <div class="overlay"></div>  
 <div class="nav">  
 <ul class="tabs">  
 <li class="tabs-item tab tab-comment tab-is-active">  
 <div class="tab-circle"></div>  
 <i class="fa fa-comment tab-icon"></i>  
 <span class="tab-name">评论</span>  
 </li> <li class="tabs-item tab tab-clipboard">  
 <div class="tab-circle"></div>  
 <i class="fa fa-clipboard tab-icon"></i>  
 <span class="tab-name">剪贴板</span>  
 </li>  
 <li class="tabs-item tab tab-burn">  
 <div class="tab-circle"></div>  
 <i class="fa fa-cloud-upload tab-icon" ></i>  
 <span class="tab-name">上传</span>  
 </li>  
 <li class="tabs-item tab tab-bell">  
 <div class="tab-circle"></div>  
 <i class="fa fa-bell tab-icon"></i>  
 <span class="tab-name">通知</span>  
 </li>  
 <li class="tabs-item tab tab-bookmark ">  
 <div class="tab-circle"></div>  
 <i class="fa fa-bookmark tab-icon"></i>  
 <span class="tab-name">书签</span>  
 </li> </ul>  
 </div>  
 <br>  
 <br>  
 <div>  
 <a href="https://www.youtube.com/watch?v=XcKb5637xjs" target="_blank">看我代码<i class="fab fa-youtube"></i></a>  
 </div>  
 </body>  
 <!-- gsap CDN -->  
 <script  
 src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"  
 完整性="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q=="  
 crossorigin="匿名"  
 referrerpolicy="无推荐人"  
 ></script>

CSS：

 @import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&subset=cyrillic"); 身体 {  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：居中；  
 高度：100vh；  
 宽度：100%；  
 过渡：0.5s；  
 溢出：隐藏；  
 } .overlay {  
 高度：200vw；  
 宽度：200vw；  
 边界半径：50%；  
 背景颜色：#000；  
 位置：绝对；  
 最高：50%；  
 左：50%；  
 变换：翻译（-50%，-50%）；  
 } .导航{  
 背景颜色：#fff；  
 填充：12px 5px；  
 边框半径：15px；  
 盒子阴影：3px 3px 15px rgba(179, 179, 179, 0.185);  
 位置：相对；  
 z指数：99；  
 } .tabs {  
 显示：弯曲；  
 宽度：490 像素；  
 justify-content：空间环绕；  
 列表样式类型：无；  
 } 。标签 {  
 填充：12px 22px；  
 背景颜色：#e0efff；  
 颜色：#58a6ff；  
 右边距：15px；  
 边框半径：55px；  
 文本对齐：居中；  
 空白：nowrap；  
 过渡：0.3s 缓和；  
 溢出：隐藏；  
 最大宽度：0px；  
 光标：指针；  
 位置：相对；  
 弹性基础：120px；  
 } .tab-is-active {  
 最大宽度：100px；  
 盒子阴影：7px 7px 15px rgba(124, 124, 124, 0.096);  
 } .tab-is-active .tab-name {  
 不透明度：1；  
 } .tab-circle {  
 位置：绝对；  
 高度：20px；  
 宽度：20px；  
 边界半径：50%；  
 边框：2px 实心#95c5fd；  
 z 指数：10；  
 不透明度：0；  
 左：30px；  
 指针事件：无；  
 } .tab-icon {  
 右边距：1px；  
 字体大小：18px；  
 垂直对齐：中间；  
 位置：相对；  
 右：6.7px；  
 顶部：-1px；  
 } .tab 名称 {  
 字体家族：“Ubuntu”，无衬线；  
 字体大小：15px；  
 字体粗细：500；  
 位置：相对；  
 过渡：0.3s 缓和；  
 顶部：1px；  
 不透明度：0；  
 } .tab-书签 {  
 背景：#cffcff；  
 颜色：#009ffb；  
 } .tab烧{  
 背景：#f1ddff；  
 颜色：#8f44fd；  
 }  
 .tab-剪贴板 {  
 背景：#ecd1dd；  
 颜色：#d93479；  
 } .tab-comment {  
 背景：#eee0ca；  
 颜色：#d3be3a；  
 } 一个 {  
 显示：块；  
 文本对齐：居中；  
 文字装饰：无；  
 颜色：#ffffff；  
 字体大小：18px；  
 背景颜色：rgba(255, 255, 255, 0.06);  
 -webkit-backdrop-filter：模糊（15px）；  
 背景过滤器：模糊（15px）；  
 填充：10px 0；  
 边距顶部：20px；  
 -webkit-box-shadow: 0 25px 23px rgba(0, 0, 0, 0.15);  
 盒子阴影：0 25px 23px rgba(0, 0, 0, 0.15);  
 边框：1.5px 实心 rgba(255, 255, 255, 0.06);  
 边框半径：8px；  
 }  
 i.fab {  
 颜色：#ff0000；  
 }

JavaScript：

 让 tabs = document.querySelectorAll(".tab");  
 让overlay = document.querySelector(".overlay"); 让 firstActive = document.querySelector(".tab-is-active");  
 让 activeColor = getComputedStyle(firstActive).color;  
 overlay.style.background = activeColor;  
 document.body.style.background = activeColor; tabs.forEach((tab) => {  
 tab.addEventListener("点击", function () {  
 让 tl = new TimelineLite(); 让accentColor = getComputedStyle(this).color;  
 this.children[0].style.borderColor = 重音颜色；  
 if (!this.classList.contains("tab-is-active")) {  
 tl.fromTo(  
 this.children[0],  
 0.1,  
 { 比例：0，不透明度：1 }，  
 { 比例：3，不透明度：0 }，  
 “0”  
 );  
 overlay.style.background = 重音颜色；  
 tl.fromTo(  
 覆盖，  
 1、  
 { 比例：0，不透明度：0 }，  
 { 比例：1，不透明度：1 }，  
 “0”  
 );  
 }  
 tabs.forEach((tab) => {  
 tab.classList.remove("tab-is-active");  
 this.classList.add("tab-is-active");  
 });  
 });  
 });

HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com

完毕！享受 动画标签 html css javascript Snippets

现在下载

本文链接：https://www.qanswer.top/17484/20130600

标签：颜色,rgba,JavaScript,HTML,tab,active,15px,CSS,255
来源： https://www.cnblogs.com/amboke/p/16660220.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

动画标签 HTML CSS JavaScript

动画标签 HTML CSS JavaScript

HTML：

CSS：

JavaScript：