CSS动画+简单JS 实现波点上升和动态tabbar案例

最近在刷视频的时候看到有意思的案例跟着码了一下持续学习进步

来源：后盾人向老师 B站抖音可以搜索

波点上升:

使用document.createElement("div") 在页面上创建100个div 并且给每个div 加上一个随机数 --duration（自定义样式名）用来生成动画的执行实现实现参差感内部还可写上文字

      for (let i = 0; i < 100; i++) {const el = document.createElement("div");el.style.cssText = `--duration:` + (Math.random() * 50 + 10);if (i % 2 === 0) {el.innerText = "虎";} else {el.innerText = "兔";}document.body.appendChild(el);}

div 设置相应的样式有背景颜色的圆、外阴影、... 使用选择器 div:nth-of-type(even) 为偶数的div改变颜色样式添加动画大小从0-1 位置从底部到顶部然后重新设置动画的持续时间animation-duration: calc(300s / var(--duration));

<style>body {background-color: #161616;height: 100vh;width: 100vw;margin: 0;padding: 0;overflow: hidden;}div {width: 80px;height: 80px;position: relative;border-radius: 40px;margin: 0 5px;display: inline-block;background-color: #4da6e5;box-shadow: 0 0 50px 5px #79bcec, 0 0 150px 5px #a6d2f2;animation: hd 5s linear infinite;animation-duration: calc(300s / var(--duration));color: white;text-align: center;line-height: 80px;font-size: 24px;}/* 让偶数的div 有不一样的颜色 和阴影效果 */div:nth-of-type(even) {background-color: #df208f;box-shadow: 0 0 50px 5px #df208c, 0 0 150px 5px #df208f;}/* 定义动画 */@keyframes hd {from {transform: translateY(100vh) scale(0);}to {transform: translateY(-100vh) scale(1);}}
</style>

效果预览：

演示地址：15.散点波光 (wsg3096.com)http://www.wsg3096.com/chestnut/glistening.html

动态的tabbar

和一般的tabber 区别就是加入了过渡效果一般的tabbar切换是排他思想去掉兄弟元素的 .active 样式给自己增加选中样式

      const secs = document.querySelectorAll("section");const qiu = document.querySelector(".qiu");for (let i = 0; i < secs.length; i++) {// for循环给每个 选项都添加点击事件secs[i].addEventListener("click", () => {// 内部再循环 排除所有的 activefor (let i = 0; i < secs.length; i++) {secs[i].classList.remove("active");}
// 然后 给自己加上secs[i].classList.add("active");
// 移动底部小球的偏移量  小球有过渡效果qiu.style.left = `${i * 138 + 36}px`;});}

HTML结构

    <main><section class="active"><div class="icons"></div><span>美工</span></section><section><div class="icons"></div><span>前端</span></section><section><div class="icons"></div><span>后端</span></section><section><div class="icons"></div><span>测试</span></section><section><div class="icons"></div><span>运维</span></section><!-- 同级的div 就代表小球 --><div class="qiu"></div></main>

CSS样式设置有过度加上active 时改变内部的 transform: translateY 实现动画效果

<style>body {background-color: #161616;height: 100vh;width: 100vw;margin: 0;padding: 0;overflow: hidden;}main {background-color: #ffffff;width: 640px;height: 80px;padding: 0 36px;border-radius: 16px;margin: 120px auto;text-align: center;display: flex;justify-content: space-between;padding-top: 20px;position: relative;}/* 图标和文字 运动时间 */.icons {width: 50px;height: 50px;background-color: blanchedalmond;transition: all 0.3s linear;pointer-events: none;border-radius: 50%;margin: 0 auto;}span {font-size: 16px;transition: all 0.3s linear;opacity: 0;display: block;transform: translateY(20px);}section {cursor: pointer;position: relative;z-index: 8;width: 88px;}.active .icons {background-color: black;transform: translateY(-80%);}.active span {opacity: 1;transform: translateY(-10px);}.qiu {width: 72px;height: 72px;background-color: #f35;position: absolute;border-radius: 50%;top: -50%;border: 8px solid #161616;transition: 0.31s linear;box-shadow: inset 0 0 6px 0 rgba(0, 0, 0, 0.4);left: 36px;}
</style>

细节：背景球球前后加上伪类定位使得与tabs 融合更加圆润

.qiu::after {

content: "";

width: 30px;

height: 10px;

position: absolute;

top: 42px;

right: -7px;

transform: translateX(100%);

background: #fff;

border-radius: 15px;

box-shadow: -5px -5px 0 0 #161616;

}

.qiu::before {

content: "";

width: 30px;

height: 10px;

position: absolute;

top: 42px;

left: -7px;

transform: translateX(-100%);

background: #fff;

border-radius: 15px;

box-shadow: 5px -5px 0 0 #161616;

}

效果图 icon 用的是纯色块有精力可以替换成 SVG 或者 iconfont

演示地址：16.带点花的tabbar (wsg3096.com)http://www.wsg3096.com/chestnut/tabbar.html

CSS动画+简单JS 实现波点上升和动态tabbar案例相关推荐

css动画和js动画_CSS与JS动画：哪个更快？
css动画和js动画 How is it possible that JavaScript-based animation has secretly always been as fast - or ...
【JavaScript、CSS】css动画、js动画
动画 js动画 css动画 Web动画的本质是元素状态改变造成的样式变更,CSS动画和JS动画的区别并不是由语言来决定的,而是由两者的特点和适用场景来判断的. CSS动画简洁高效,提升交互体验而编写的 ...
js写css字体,js如何写出css动画？js写css动画的方法（代码）
本篇文章给大家带来的内容是关于js如何写出css动画 ?js写css动画的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 使用setTimeout()或者setInter ...
css动画和 js动画_CSS大师的动画建议
css动画和 js动画 Just over a week ago we were lucky enough to have Tiffany Brown join us on the SitePoin ...
【译】CSS动画 vs JS动画
原文地址目前有两个主流的方法在web上创建动画:使用CSS或JS.到底选择哪种方法来实现动画,完全取决于你的项目以及你想要达到的效果. tips: 对于简单的只出现一次的过渡效果,可以采用CSS动画 ...
css动画与js动画的区别
CSS动画优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout,s ...
css动画和js动画比较！
原文地址:http://css-tricks.com/myth-busting-css-animations-vs-javascript/ 译文地址:https://github.com/classi ...
分别实现：css动画、js动画、vue动画
一.使用css3实现动画 css3动画的核心是定义transition或 keyframes 两种. keyframes:设置多个关键帧来控控制不懂时间下动画对象属性的值,(可循环的) transit ...
JS动画和CSS动画之间的区别和特点?
一.写在前面之前我们讲了requestAnimationFrame用来解决js的相关动画出现卡顿的问题.现在我们来详细了解一下CSS和JS动画之间的区别和特点. 二.CSS动画优点: 1.浏览器可 ...

CSS动画+简单JS 实现波点上升和动态tabbar案例

波点上升:

动态的tabbar

CSS动画+简单JS 实现波点上升和动态tabbar案例相关推荐

最新文章

热门文章

CSS动画+简单JS 实现波点上升 和 动态tabbar案例

波点上升:

动态的tabbar

CSS动画+简单JS 实现波点上升 和 动态tabbar案例相关推荐

最新文章

热门文章

CSS动画+简单JS 实现波点上升和动态tabbar案例

CSS动画+简单JS 实现波点上升和动态tabbar案例相关推荐