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