Java教程

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

这篇关于动画标签 HTML CSS JavaScript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航