编程语言
首页 > 编程语言> > 动画标签 HTML CSS JavaScript

动画标签 HTML CSS JavaScript

作者:互联网

动画标签 HTML CSS JavaScript

动画标签 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

现在下载

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

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

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