css+js实现一个跳动的loading动画效果

css+js实现跳动的loading动画

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap");body {display: flex;height: 100vh;justify-content: center;align-items: center;text-align: center;background: #121212;}.loading {display: flex;color: white;font-size: 5em;font-family: "Baloo Bhaijaan", cursive;text-transform: uppercase;}.loading span {text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px transparent, 0 7px transparent, 0 8px transparent, 0 9px transparent, 0 10px 10px rgba(0, 0, 0, 0.4);transform: translateY(20px);animation: bounce 0.3s ease infinite alternate;}@keyframes bounce {to {text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px #bbb, 0 7px #bbb, 0 8px #bbb, 0 9px #bbb, 0 50px 25px rgba(0, 0, 0, 0.2);transform: translateY(-20px);}}</style>
</head><body><div class="loading">Loading</div><script>let loading = document.querySelector(".loading");let letters = loading.textContent.split("");loading.textContent = "";letters.forEach((letter, i) => {let span = document.createElement("span");span.textContent = letter;span.style.animationDelay = `${i / 10}s`;loading.append(span);});</script>
</body></html>

css+js实现一个跳动的loading动画效果相关推荐

【每日一练】31—CSS 实现一个彩色旋转方块loading动画效果
写在前面今天练习的这个项目是一个加载动画,这个加载动画主要是为了在网络不好,页面加载缓慢时给用户的一个提示,一个好的加载动画,可以缓解用户的焦虑情绪,让等待变得有趣,现在很多产品也越来越注重这一块的 ...
用css做一个移动射击动画,如何使用纯CSS实现一只移动的小白兔动画效果
本篇文章给大家带来的内容是关于如何使用纯CSS实现一只移动的小白兔动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览代码解读定义 dom,页面中包含 2 个元素,分 ...
【Vue+Element UI】关闭指定某一个页面的loading动画
[Vue+Element UI]关闭指定某一个页面的loading动画模板:vue-admin-template v4.4.0 问题描述:由于vue-admin默认配置了全局loading,所以页面 ...
用html+css+js实现一个无限级树形控件
题目描述: 用html+css+js实现一个无限级树形控件,功能如下: 1.利用html.css展示一个树形菜单 2.点击箭头图标展开子项 3.点击父节点勾选图标能全选或全取消,点击叶节点勾选图标可以 ...
HTML+CSS制作七夕跳动的红心动画效果
HTML+CSS制作七夕跳动的红心动画效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
[css] 使用css写一个红绿灯交替的动画效果
[css] 使用css写一个红绿灯交替的动画效果 <!DOCTYPE html> <html lang="en"><head> <meta ...
css实现加载中loading动画效果
1 效果 2 实现原理原理很简单: 1 设置100px宽高的div,再设置成圆形border-radius:50%: 2 设置border一定宽度和颜色,再设置border-left为同样宽度和另一 ...
html中各种js效果图,HTML+CSS+JS制作一个漂亮的橙子动态时钟
HTML+CSS+JS制作一个漂亮的橙子动态时钟 1. 效果图: 2. 背景产生: 利用四块与圆同高的矩形转一定的角度将圆切分成八块形成橙子内里,利用径向渐变形成橙皮. background: rad ...
用HTML+CSS+JS做一个漂亮的个人网页
个人网页设计个人网页(html+css+js)--带背景音乐.樱花飘落效果页面美观,样式丰富可以根据自己需求进行修改源码在这里获取https://download.csdn.net/downl ...

css+js实现一个跳动的loading动画效果

css+js实现一个跳动的loading动画效果相关推荐

最新文章

热门文章