前端特效：发光动画按钮：上传按钮
H5+CSS+JS
骨架+皮肤+功能
效果展示
源代码：
H5部分：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link rel="stylesheet" href="style.css" /><title>上传按钮-动画</title></head><body><main><div class="upload-button"><svg class="arrow" width="40" height="40" viewBox="0 0 40 40"><!-- 进度 --><circlecx="50%"cy="50%"r="19"fill="none"stroke="#ffffff"stroke-width="2"></circle><!-- 箭头 --><!-- 左边的线 --><!-- points="6,20 20,6 34,20" --><!-- points="8,20 18,30 30, 12" --><polylinepoints="6,20 20,6 34,20"stroke="#ffffff"fill="none"stroke-width="2"class="arrow-top"></polyline><polylinepoints="8,20 18,30 30,12"stroke="#ffffff"fill="none"stroke-width="2"class="checkmark"></polyline><!-- 中间的线 --><linex1="50%"y1="7"x2="50%"y2="34"stroke="#ffffff"stroke-width="2"class="middle-line"></line></svg><div class="progress-bar"></div></div></main><script src="index.js"></script></body></html>
CSS部分：
html,body {margin: 0;}* {box-sizing: border-box;}body {background-color: #2f3542;}main {display: flex;align-items: center;justify-content: center;height: 100vh;}.cube {width: 250px;height: 250px;transform-style: preserve-3d;transform-origin: 125px 125px 0;animation: rotate-cube 10s ease-in-out infinite;}.cube > div {width: 250px;height: 250px;background-size: cover;background-position: center center;opacity: 0.8;position: absolute;box-shadow: inset 0 0 4px 2px rgba(106, 106, 106, 0.4);}/* 前 */.cube .img1 {background-image: url("/photos/274131/pexels-photo-274131.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");transform: rotateY(0deg) translateZ(125px);}/* 右 */.cube .img2 {background-image: url("/photos/1480690/pexels-photo-1480690.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");transform: rotateY(90deg) translateZ(125px);}/* 左 */.cube .img3 {background-image: url("/photos/36487/above-adventure-aerial-air.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");transform: rotateY(-90deg) translateZ(125px);}/* 下 */.cube .img4 {background-image: url("/photos/338713/pexels-photo-338713.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");transform: rotateX(90deg) translateZ(125px);}/* 上 */.cube .img5 {background-image: url("/photos/325044/pexels-photo-325044.jpeg?cs=srgb&dl=close-up-of-fish-over-black-background-325044.jpg&fm=jpg");transform: rotateX(-90deg) translateZ(125px);}/* 后 */.cube .img6 {background-image: url("/photos/404280/pexels-photo-404280.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");transform: rotateY(180deg) translateZ(125px);}@keyframes rotate-cube {0% {transform: rotateX(0deg) rotateY(0deg);}20% {/* 右边图片 */transform: rotateY(-90deg);}40% {/* 上 */transform: rotateX(-90deg);}60% {/* 左 */transform: rotateY(90deg);}80% {/* 下 */transform: rotateX(90deg);}100% {transform: rotateX(0deg) rotateY(0deg);}}
js部分
// 获取上传按钮和进度条var uploadButton = document.querySelector(".upload-button");var progressBar = document.querySelector(".upload-button .progress-bar");// 进度条完成时的宽度let width = uploadButton.getBoundingClientRect().width;// 假定上传时间为5slet uploadTime = 5000;uploadButton.addEventListener("click", () => {// 先移除之前的完成样式uploadButton.classList.remove("uploaded");//设置正在上传.uploading样式uploadButton.classList.add("uploading");//假设5秒后上传完成setTimeout(() => {uploadButton.classList.replace("uploading", "uploaded");}, uploadTime);let start = null;function grow(timestamp) {// 动画开始时的时间戳if (!start) start = timestamp;// 距离开始时已经过的时间戳let progress = timestamp - start;//按比例增加进度条宽度progressBar.style.width = `${Math.min(width * (progress / uploadTime),width)}px`;// 如果上传未完成，继续执行此函数，递归循环if (progress < uploadTime) {window.requestAnimationFrame(grow);}}// 开始执行grow函数window.requestAnimationFrame(grow);});
