我是c站的一个小博主L_ar，近期我会每天分享前端知识包括（原生的web语句，以及vue2和vue3，微信小程序的写法及知识点）本篇文章收录于html特效专栏中，如果想每天在我这学到一些东西，请关注我并订阅专栏，每天都分享前端知识哦~
前端是做什么的？
1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。
2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。
3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。
4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。
前端的特效视觉：
层次结构的表现
动态效果，如缩放，覆盖，滑出网页或单个视觉元素，可帮助用户理解网页信息架构。通常是通过转场和菜单来展开网页。
表现层级关系
为了展现层与层的关系，是抽屉，是打开，还是平级切换等等。让用户知道这个界面和上一个、下一个的关系。
清晰明确
动效可以清晰地表明各种数据块中间的逻辑结构，即使在数据高度饱和的情况下也能使一切从观感上有组织性。
添加了图层
在网站制作过程中加上特效，每个元素都在用户滚动页面或者是鼠标经过的地方有动态效果，就像在平面层上多出了一个动态层，这样看起来更加有层次感。
我想借此专栏发布的内容帮助那些正在入坑前端的家人们，同时作为我以后复习的笔记，希望我们可以互相帮助，共同加油！！！
1.侧边栏菜单简约版
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>侧边导航栏</title><!-- 引入字体图标 --><link href="/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"><style>*{/* 初始化 */margin: 0;padding: 0;}body{/* 100%窗口高度 */height: 100vh;/* 弹性布局 居中 */display: flex;justify-content: center;align-items: center;background-color: #7284a7;}ul{list-style: none;}nav{/* 固定定位 */position: fixed;width: 300px;height: 650px;left: 0;background-color: #ffbb00;border-radius: 20px 20px 20px 0px;}.menus{/* 垂直居中 */margin: 50px 0;color: #fff;}.li{letter-spacing: 2px;font-size: 17px;font-weight: 600;padding: 16px 0;/* 动画过渡 */transition: 0.3s;}.menus li:hover{background-color: #ae00ff;}.li .fa{font-size: 20px;width: 50px;height: 20px;text-align: center;margin-left: 5px;}.li ul{border-radius: 20px;width: 0;height: 550px;padding: 50px 0;background-color: #a06993;position: absolute;top: 0;right: 0;overflow: hidden;transition: 0.3s;}.li ul li{padding: 16px 24px;/* 文字禁止换行 */white-space: nowrap;transition: 0.3s;}.li:hover ul{border-radius: 20px;width: 250px;}.li ul li:hover{background-color: #c28fb4;}</style></head><body><nav><ul class="menus"><li class="li"><i class="fa fa-qq" aria-hidden="true"></i>QQ<ul><li><i class="fa fa-qq" aria-hidden="true">1号</i></li><li><i class="fa fa-qq" aria-hidden="true">2号</i></li><li><i class="fa fa-qq" aria-hidden="true">3号</i></li><li><i class="fa fa-qq" aria-hidden="true">4号</i></li><li><i class="fa fa-qq" aria-hidden="true">5号</i></li><li><i class="fa fa-qq" aria-hidden="true">6号</i></li><li><i class="fa fa-qq" aria-hidden="true">7号</i></li></ul></li><li class="li"><i class="fa fa-weixin" aria-hidden="true"></i>weixin<ul><li><i class="fa fa-weixin" aria-hidden="true">1号</i></li><li><i class="fa fa-weixin" aria-hidden="true">2号</i></li><li><i class="fa fa-weixin" aria-hidden="true">3号</i></li><li><i class="fa fa-weixin" aria-hidden="true">4号</i></li><li><i class="fa fa-weixin" aria-hidden="true">5号</i></li><li><i class="fa fa-weixin" aria-hidden="true">6号</i></li><li><i class="fa fa-weixin" aria-hidden="true">7号</i></li><li><i class="fa fa-weixin" aria-hidden="true">8号</i></li><li><i class="fa fa-weixin" aria-hidden="true">9号</i></li><li><i class="fa fa-weixin" aria-hidden="true">10号</i></li></ul></li><li class="li"><i class="fa fa-weibo" aria-hidden="true"></i>weibo<ul><li><i class="fa fa-weibo" aria-hidden="true">1号</i></li><li><i class="fa fa-weibo" aria-hidden="true">2号</i></li><li><i class="fa fa-weibo" aria-hidden="true">3号</i></li></ul></li><li class="li"><i class="fa fa-tencent-weibo" aria-hidden="true"></i>tencent-weibo<ul><li><i class="fa fa-tencent-weibo" aria-hidden="true">1号</i></li><li><i class="fa fa-tencent-weibo" aria-hidden="true">2号</i></li><li><i class="fa fa-tencent-weibo" aria-hidden="true">3号</i></li><li><i class="fa fa-tencent-weibo" aria-hidden="true">4号</i></li><li><i class="fa fa-tencent-weibo" aria-hidden="true">5号</i></li></ul></li><li class="li"><i class="fa fa-telegram" aria-hidden="true"></i>telegram<ul><li><i class="fa fa-telegram" aria-hidden="true">1号</i></li><li><i class="fa fa-telegram" aria-hidden="true">2号</i></li><li><i class="fa fa-telegram" aria-hidden="true">3号</i></li><li><i class="fa fa-telegram" aria-hidden="true">4号</i></li><li><i class="fa fa-telegram" aria-hidden="true">5号</i></li></ul></li></ul></nav></body></html>
2.导航栏点击波痕
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>点击波痕特效按钮</title><style>*{/* 初始化 */margin: 0;padding: 0;}body{/* 100%窗口高度 */height: 100vh;/* 弹性布局 居中 */display: flex;justify-content: center;align-items: center;/* 渐变背景 */background: linear-gradient(200deg,#faa200,#ff03b3);;}.btn-box{width: 500px;/* 弹性布局 */display: flex;/* 横向排列 */flex-direction: row;/* 允许换行 */flex-wrap: wrap;/* 平均分配宽度给每一个子元素 */justify-content: space-around;}.btn-box button{/* 相对定位 */position: relative;border: none;background: linear-gradient(to right,#4806ff,#efff0b);;width: 200px;height: 60px;margin: 20px 0;font-size: 18px;color: #fff;/* 字间距 */letter-spacing: 3px;border-radius: 30px;/* 阴影 */box-shadow: 3px 5px 10px rgba(0,0,0,0.1);cursor: pointer;/* 这里加个溢出隐藏 */overflow: hidden;}.btn-box button:hover{box-shadow: 3px 5px 10px rgba(0,0,0,0.2);}.btn-box button span{/* 绝对定位 */position: absolute;width: 30px;height: 30px;background-color: rgb(255, 0, 0);border-radius: 50%;transform: translate(-50%,-50%);/* 设置元素不对指针事件做出反应 */pointer-events: none;/* 执行动画 */animation: animate 1s ease;}/* 定义动画 */@keyframes animate {from{width: 0;height: 0;opacity: 0.5;}to{width: 400px;height: 400px;opacity: 0;}}</style></head><body><h1 style="font-size: 50px;color: rgb(255, 247, 247);">L_ar</h1><div class="btn-box"><button>点赞</button><button>关注</button><button>收藏</button><button>评论</button></div><script type="text/javascript">// 获取所有按钮对象const btns=document.querySelectorAll("button");// 循环所有按钮,并为每一个按钮添加点击事件btns.forEach(btn=>{btn.addEventListener("click",e=>{// 创建span元素,并设置其位置为鼠标点击的位置let span=document.createElement("span");span.style.left=e.offsetX+"px";span.style.top=e.offsetY+"px";// 将span元素添加到按钮标签里btn.appendChild(span);// 1秒后删除span元素setTimeout(() => {span.remove();}, 1000);})})</script></body></html>
3.鼠标悬停波痕
图片资源：
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>水波纹按钮效果</title><style>*{/* 初始化 */margin: 0;padding: 0;}body{/* 100%窗口高度 */height: 100vh;/* 弹性布局 居中 */display: flex;justify-content: center;align-items: center;/* 渐变背景 */background: linear-gradient(200deg,#ff00b3,#7700ff);}.ziti{font-size: 50px;color: rgb(229, 255, 0);}.btn-box{width: 500px;/* 弹性布局 */display: flex;/* 横向排列 */flex-direction: row;/* 允许换行 */flex-wrap: wrap;/* 平均分配宽度 */justify-content: space-around;}.btn-box .btn{/* 相对定位 */position: relative;width: 200px;height: 60px;line-height: 60px;text-align: center;color: #00ff6a;border: 2px solid #ff0000;font-size: 18px;margin: 20px 0;/* 字间距 */letter-spacing: 4px;cursor: pointer;/* 溢出隐藏 */overflow: hidden;}.btn-box .btn span{position: relative;z-index: 1;/* 动画过渡 */transition: 1s;}.btn-box .btn .wave{/* 绝对定位 */position: absolute;top: calc(100% + 22px);left: 0;width: 100%;height: 100%;background-color: #ff0000;transition: 1s;}.btn-box .btn .wave::before{content: "";position: absolute;top: -22px;left: 0;background-image: url("hongbolang.png");width: 100%;height: 22px;/* 执行动画：动画名 时长 线性的 无限次播放 */animation: animate 0.5s linear infinite;}.btn-box .btn:hover .wave{top: 0;}.btn-box .btn:hover span{color: #fff;}/* 定义动画 */@keyframes animate {0%{background-position-x: 0;background-position-y: -22px;}100%{background-position-x: 118px;background-position-y: -22px;}}</style></head><body><span class="ziti">L_ar</span><div class="btn-box"><div class="btn"><span>点赞</span><div class="wave"></div></div><div class="btn"><span>关注</span><div class="wave"></div></div><div class="btn"><span>收藏</span><div class="wave"></div></div><div class="btn"><span>评论</span><div class="wave"></div></div></div></body></html>
4.简约版登陆界面
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>背景动态变化的登录界面</title><style>*{/* 初始化 */margin: 0;padding: 0;}body{/* 100%窗口高度 */height: 100vh;/* 弹性布局 居中 */display: flex;justify-content: center;align-items: center;/* 渐变背景 */background: linear-gradient(200deg,#e3c5eb,#a9c1ed);/* 溢出隐藏 */overflow: hidden;}.container{/* 相对定位 */position: relative;z-index: 1;background-color: #fff;border-radius: 15px;/* 弹性布局 垂直排列 */display: flex;flex-direction: column;align-items: center;width: 350px;height: 500px;/* 阴影 */box-shadow: 0 5px 20px rgba(0,0,0,0.1);}span{width: 100%;}.flex{display: flex;flex-direction: row;justify-content: space-around}.container .tit{font-size: 26px;margin: 65px auto 70px auto;}.container input{width: 280px;height: 30px;text-indent: 8px;border: none;border-bottom: 1px solid rgb(115, 116, 219);outline: none;margin: 12px auto;}.container button{width: 280px;height: 40px;margin: 35px auto 40px auto;border: none;background: linear-gradient(-200deg,#ff03ab,#6f00ff);color: #fff;font-weight: bold;letter-spacing: 8px;border-radius: 10px;cursor: pointer;/* 动画过渡 */transition: 0.5s;}.container button:hover{background: linear-gradient(-200deg,#6f00ff,#ff03ab);background-position-x: -280px;}.container span{font-size: 14px;}.container a{color: rgb(255, 60, 0);text-decoration: none;}ul li{position: absolute;border: 1px solid rgb(255, 238, 0);background-color: rgb(255, 238, 0);width: 30px;height: 30px;list-style: none;opacity: 0;}.square li{top: 40vh;left: 60vw;/* 执行动画：动画名 时长 线性的 无限次播放 */animation: square 10s linear infinite;}.square li:nth-child(2){top: 80vh;left: 10vw;/* 设置动画延迟时间 */animation-delay: 2s;}.square li:nth-child(3){top: 80vh;left: 85vw;/* 设置动画延迟时间 */animation-delay: 4s;}.square li:nth-child(4){top: 10vh;left: 70vw;/* 设置动画延迟时间 */animation-delay: 6s;}.square li:nth-child(5){top: 10vh;left: 10vw;/* 设置动画延迟时间 */animation-delay: 8s;}.circle li{bottom: 0;left: 15vw;/* 执行动画 */animation: circle 10s linear infinite;}.circle li:nth-child(2){left: 35vw;/* 设置动画延迟时间 */animation-delay: 2s;}.circle li:nth-child(3){left: 55vw;/* 设置动画延迟时间 */animation-delay: 6s;}.circle li:nth-child(4){left: 75vw;/* 设置动画延迟时间 */animation-delay: 4s;}.circle li:nth-child(5){left: 90vw;/* 设置动画延迟时间 */animation-delay: 8s;}/* 定义动画 */@keyframes square {0%{transform: scale(0) rotateY(0deg);opacity: 1;}100%{transform: scale(5) rotateY(1000deg);opacity: 0;}}@keyframes circle {0%{transform: scale(0) rotateY(0deg);opacity: 1;bottom: 0;border-radius: 0;}100%{transform: scale(5) rotateY(1000deg);opacity: 0;bottom: 90vh;border-radius: 50%;}}</style></head><body><div class="container"><div class="tit">登录</div><input type="text" placeholder="账号"><input type="password" placeholder="密码"><button>登录</button><span class="flex"><a href="#">忘记密码</a><a href="#">去注册</a></span></div><div class="square"><ul><li></li><li></li><li></li><li></li><li></li></ul></div><div class="circle"><ul><li></li><li></li><li></li><li></li><li></li></ul></div></body></html>
5.彩虹条状爱心加载页面效果
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>炫彩爱心加载特效</title><style>body{margin: 0;/* 100%窗口高度 */height: 100vh;/* 弹性布局 水平、垂直居中 */display: flex;align-items: center;justify-content: center;/* 背景径向渐变 */background: radial-gradient(circle at center,mediumpurple,#000);}.heart{width: 280px;height: 220px;display: flex;justify-content: space-between;}.heart span{/* 自定义属性值【划重点】 */--c:plum;--h:50%;--t:25%;/* var()函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用 */background-color: var(--c);width: 20px;border-radius: 10px;position: relative;height: var(--h);top: var(--t);/* 执行动画 infinite是无限次播放 */animation: beating 1s infinite;}.heart span:nth-child(1),.heart span:nth-child(9){--c:rgb(255, 0, 0);--h:60px;--t:44px;}.heart span:nth-child(2),.heart span:nth-child(8){--c:rgb(255, 0, 191);--h:120px;--t:12px;}.heart span:nth-child(3),.heart span:nth-child(7){--c:rgb(0, 255, 0);--h:160px;--t:0;}.heart span:nth-child(4),.heart span:nth-child(6){--c:rgb(0, 102, 255);--h:180px;--t:16px;}.heart span:nth-child(5){--c:rgb(212, 0, 255);--h:188px;--t:32px;}.bix{font-size: 60px;color: aliceblue;position: absolute;left: 45%;top: 200px;}/* 接下来我们定义动画 */@keyframes beating{0%,30%{height: var(--h);top: var(--t);background-color: var(--c);filter: blur(0);}60%,70%{height: 50%;top: 25%;background-color: rgb(55, 208, 255);/* 模糊度 */filter: blur(5px);}}</style></head><body><span class="bix">加载中</span><div class="heart"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></body></html>
6.彩色试管加载效果
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>纯CSS实现漂亮的加载动画</title><style>*{/* 初始化 取消页面内外边距 */margin: 0;padding: 0;/* 这个是告诉浏览器：你想要设置的边框喝内边距的值是包含在总宽高内的 */box-sizing: border-box;}body{/* 100%窗口高度 */height: 100vh;/* 弹性布局 水平、垂直居中 */display: flex;justify-content: center;align-items: center;background-color: #7eb1f5;}.loading{display: flex;/* 水平显示 */flex-direction: row;}.loading div{position: relative;width: 40px;height: 200px;/* 渐变背景 */background: linear-gradient(to bottom,rgba(0,0,0,0.05),#eef1f5);margin: 20px;border-radius: 20px;border: 2px solid #eef1f5;/* 阴影 */box-shadow: 15px 15px 20px rgba(0,0,0,0.1),-15px -15px 20px #fff,inset -5px -5px 5px rgba(255,255,255,0.5),inset 5px 5px 5px rgba(0,0,0,0.05);/* 溢出隐藏 */overflow: hidden;}.loading div::before{content: "";position: absolute;top: 0;left: 0;width: 36px;height: 36px;border-radius: 50%;box-shadow: inset -5px -5px 5px rgba(0,0,0,0.1),0 420px 0 400px lightskyblue;/* 执行动画：动画名称 时长 加速后减速 无限次播放 */animation: animate 2s ease-in-out infinite;/* 动画延迟 通过var函数获取自定义属性--x，再由calc函数计算得出每个元素的动画延迟时间 */animation-delay: calc(var(--x) * -0.3s);/* 初始化时先向上移动160px */transform: translateY(160px);}.bix{font-size: 60px;color: aliceblue;position: absolute;left: 44%;top: 200px;}/* 定义动画 */@keyframes animate{0%{transform: translateY(160px);/* hue-rotate是颜色滤镜，可以设置不同的度数来改变颜色 */filter: hue-rotate(0deg);}50%{transform: translateY(0px);filter: hue-rotate(180deg);}100%{transform: translateY(160px);filter: hue-rotate(360deg);}}</style></head><body><span class="bix">正在加载</span><div class="loading"><!-- 【--x是自定义属性，在后面样式中会用到】 --><div style="--x:0"></div><div style="--x:1"></div><div style="--x:2"></div><div style="--x:3"></div><div style="--x:4"></div><div style="--x:5"></div></div></body></html>
7.三色旋转加载效果
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>好看的加载动画效果</title><style>*{/* 初始化 取消页面内外边距 */margin: 0;padding: 0;}body{/* 100%窗口高度 */height: 100vh;/* 渐变背景 */background: linear-gradient(to bottom,#762b2b,#263f09);/* 弹性布局 水平、垂直居中 */display: flex;justify-content: center;align-items: center;}.loading{width: 200px;height: 200px;box-sizing: border-box;border-radius: 50%;border-top: 10px solid #e502fa;/* 相对定位 */position: relative;/* 执行动画（动画a1 时长 线性的 无限次播放） */animation: a1 2s linear infinite;}.loading::before,.loading::after{content: "";width: 200px;height: 200px;/* 绝对定位 */position: absolute;left: 0;top: -10px;box-sizing: border-box;border-radius: 50%;}.loading::before{border-top: 10px solid #ffbf00;/* 旋转120度 */transform: rotate(120deg);}.loading::after{border-top: 10px solid #ff2f00;/* 旋转240度 */transform: rotate(240deg);}.loading span{position: absolute;width: 200px;height: 200px;line-height: 200px;text-align: center;color: #fff;/* 执行动画（动画a2 时长 线性的 无限次播放） */animation: a2 2s linear infinite;}/* 定义动画 */@keyframes a1{to{transform: rotate(360deg);}}@keyframes a2{to{transform: rotate(-360deg);}}</style></head><body><div class="loading"><span>拼命加载中</span></div></body></html>
8.金属质感光闪加载效果
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>动感的金属质感闪光文字</title><style>*{/* 初始化 */margin: 0;padding: 0;}body{/* 100%窗口高度 */height: 100vh;/* 弹性布局 居中 */display: flex;justify-content: center;align-items: center;background-color: #000;}.container{/* 给图片应用一种线性乘法，使其看起来更亮或更暗 */filter: brightness(300%);/* 溢出隐藏 */overflow: hidden;}span.text{color: #fff;font-size: 200px;font-weight: bold;background-color: #000;}span.text::before{content: "LOADING...";/* 绝对定位 */position: absolute;/* 设置混合模式为：差别 */mix-blend-mode: difference;/* 模糊 */filter: blur(2px);}span.back{/* 渐变背景 */background: linear-gradient(113deg,rgb(0, 174, 255),rgb(99, 3, 253));position: absolute;left: 0;top: 0;width: 100%;height: 100%;/* 设置混合模式为：乘法（类似PS的正片叠底） */mix-blend-mode: multiply;}span.shine{/* 径向渐变背景，并且尺寸缩放为25%，按照默认方式平铺 */background: radial-gradient(circle at center,#fff,#000 35%) center / 25% 25%;position: absolute;top: -100%;left: -100%;bottom: 0;right: 0;/* 设置混合模式为：颜色减淡 */mix-blend-mode: color-dodge;animation: move 2s linear infinite;}/* 定义动画 */@keyframes move {to{transform: translate(50%,50%);}}</style></head><body><div class="container"><span class="text">LOADING...</span><span class="back"></span><span class="shine"></span></div></body></html>
9.高级旋转变色加载特效
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>高级的转动变色加载特效</title><style>*{/* 初始化 取消页面元素的内外边距 */margin: 0;padding: 0;}body{/* 100%窗口高度 */height: 100vh;/* 弹性布局 水平、垂直居中 */display: flex;justify-content: center;align-items: center;background-color: #000;}.container{width: 300px;height: 300px;/* 相对定位 */position: relative;/* 弹性布局 */display: flex;justify-content: center;align-items: center;/* 自定义属性--h 即色相 */--h: calc(var(--percent) / 100 * 360);/* hsl函数使用色相,饱和度,亮度来定义颜色 */color: hsl(var(--h), 100%, 75%);/* 执行动画:动画名称 时长 线性的 无限次播放 */animation: changecolor 5s linear infinite;}.container span{/* 绝对定位 */position: absolute;/* 自定义属性 可通过var函数进行调用 */--diameter: calc(50px + (var(--n) - 1) * 30px);width: var(--diameter);height: var(--diameter);border-style: solid;/* currentColor代表当前元素被应用上的color颜色值,如果当前元素没有在css里指定一个color值,那它的颜色值就从父级元素继承而来(这里父级元素还没有设置color,所以暂时看不到) */border-color: currentColor transparent;border-width: 10px 10px 0 0;border-radius: 50%;/* 执行动画: 动画名称 时长(暂时不设置) 线性的 无限次播放 */animation: rotating linear infinite;/* 计算并设置动画时长 */animation-duration: calc(5s / (9 - var(--n) + 1));/* 大致的效果已经出来了,接下来我们来改变颜色 */}/* 为每一个span元素设置自定义属性--n */.container span:nth-child(1){--n: 1;}.container span:nth-child(2){--n: 2;}.container span:nth-child(3){--n: 3;}.container span:nth-child(4){--n: 4;}.container span:nth-child(5){--n: 5;}.container span:nth-child(6){--n: 6;}.container span:nth-child(7){--n: 7;}.container span:nth-child(8){--n: 8;}.container span:nth-child(9){--n: 9;}.bix{font-size: 60px;color: aliceblue;position: absolute;left: 44%;top: 200px;}/* 定义动画 *//* 旋转 */@keyframes rotating {to{/* 1turn表示一圈 */transform: rotate(1turn);}}/* 通过改变自定义属性--percent来改变颜色 */@keyframes changecolor {0%,100%{--percent: 0;}10%{--percent: 10;}20%{--percent: 20;}30%{--percent: 30;}40%{--percent: 40;}50%{--percent: 50;}60%{--percent: 60;}70%{--percent: 70;}80%{--percent: 80;}90%{--percent: 90;}}</style></head><body><span class="bix">正在加载</span><div class="container"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></body></html>
10.方旗块加载效果
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>菱形加载动画</title><style>body{margin: 0;padding: 0;height: 100vh;display: flex;justify-content: center;align-items: center;background: linear-gradient(200deg,#f4efef,#e3eeff);}.loading{width: 200px;height: 200px;display: grid;/* 制作3列的网格容器 */grid-template-columns: repeat(3,1fr);/* 设置行与列之间的间隙 */grid-gap: 10px;/* 对子部分进行编号 *//* counter-reset: number; *//* 旋转45度 */transform: rotate(45deg);}.loading span{/* 自定义属性 */--c:red;/* 调用var函数使用自定义属性--c */background-color: var(--c);position: relative;transform: rotate(0);/* 执行动画：动画 时长 线性的 无限次播放 */animation: blinking 2s linear infinite;/* 动画延迟 */animation-delay: var(--d);}.loading span::before{/* 设置增量 *//* counter-increment: number; *//* 将编号赋值到content，这里有助于我们根据编号设置样式 *//* content: counter(number); */color: #fff;position: absolute;width: 100%;height: 100%;}.loading span:nth-child(7){--c:#f15a5a;--d:0s;}.loading span:nth-child(4),.loading span:nth-child(8){--c:#f0c419;--d:0.2s;}.loading span:nth-child(1),.loading span:nth-child(5),.loading span:nth-child(9){--c:#4eba6f;--d:0.4s;}.loading span:nth-child(2),.loading span:nth-child(6){--c:#2d95bf;--d:0.6s;}.loading span:nth-child(3){--c:#955ba5;--d:0.8s;/* 到这里基本完成了，我们来吧编号去掉吧 */}.bix{font-size: 60px;color: rgb(255, 0, 149);position: absolute;left: 44%;top: 200px;}/* 定义动画 缩放 */@keyframes blinking{0%,100%{transform: scale(0);}40%,80%{transform: scale(1);}}</style></head><body><span class="bix">正在加载</span><div class="loading"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></body></html>
