企业网站备案域名可以用个人的,哪些网站可宣传,网络营销名词解释汇总,南京学校网站制作文章目录 十二#xff1a;铜钱3D圆环加载特效1.效果展示2.HTML完整代码 十三#xff1a;扇形百分比加载特效1.效果展示2.HTML完整代码 十四#xff1a;四色圆环显现加载特效1.效果展示2.HTML完整代码 十五#xff1a;跷跷板加载特效1.效果展示2.HTML完整代码 十二#xff… 文章目录 十二铜钱3D圆环加载特效1.效果展示2.HTML完整代码 十三扇形百分比加载特效1.效果展示2.HTML完整代码 十四四色圆环显现加载特效1.效果展示2.HTML完整代码 十五跷跷板加载特效1.效果展示2.HTML完整代码 十二铜钱3D圆环加载特效
1.效果展示 2.HTML完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title铜钱3D圆环加载特效/titlestylebody {display: flex;/* 设置body为弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */height: 100vh;/* 高度为视口高度的100% */margin: 0;/* 外边距为0 */background-color: #222;/* 背景颜色为深灰色 */overflow: hidden;/* 隐藏溢出的内容 */}.loader {position: relative;/* 相对定位 */width: 80px;/* 宽度80像素 */height: 80px;/* 高度80像素 */transform-style: preserve-3d;/* 保持3D转换效果 */animation: outerRotate 8s infinite linear;/* 应用outerRotate动画时长8秒无限循环线性动画 */box-shadow: 0 0 20px rgba(255, 255, 255, 0.2),0 0 40px rgba(255, 255, 255, 0.2),0 0 60px rgba(255, 255, 255, 0.2),0 0 80px rgba(255, 255, 255, 0.2),0 0 100px rgba(255, 255, 255, 0.2);/* 添加多层阴影效果模拟发光 */}.loader div {position: absolute;/* 绝对定位 */width: 100%;/* 宽度100% */height: 100%;/* 高度100% */border-radius: 50%;/* 边框圆角为50%形成圆形 */border: 4px solid transparent;/* 边框4像素宽透明色 */transform-origin: center center;/* 转换原点为中心点 */animation: spin 2s infinite linear;/* 应用spin动画时长2秒无限循环线性动画 */}.loader div:nth-child(1) {transform: translateZ(40px);/* 在Z轴上移动40像素 */animation-delay: 0s;/* 动画无延迟 */border-top-color: #e74c3c;/* 顶部边框颜色 */}.loader div:nth-child(2) {transform: translateZ(40px);/* 在Z轴上移动40像素 */animation-delay: -0.5s;/* 动画延迟-0.5秒即提前0.5秒开始 */border-top-color: #9b59b6;/* 顶部边框颜色 */}.loader div:nth-child(3) {transform: translateZ(40px);/* 在Z轴上移动40像素 */animation-delay: -1s;/* 动画延迟-1秒即提前1秒开始 */border-top-color: #2ecc71;/* 顶部边框颜色 */}.loader div:nth-child(4) {transform: translateZ(40px);/* 在Z轴上移动40像素 */animation-delay: -1.5s;/* 动画延迟-1.5秒即提前1.5秒开始 */border-top-color: #f1c40f;/* 顶部边框颜色 */}keyframes outerRotate {0% {transform: rotateY(0deg);/* 初始状态Y轴旋转0度 */}100% {transform: rotateY(360deg);/* 结束状态Y轴旋转360度 */}}keyframes spin {0% {transform: rotateX(0deg) rotateY(0deg);/* 初始状态X轴和Y轴都旋转0度 */}100% {transform: rotateX(360deg) rotateY(360deg);/* 结束状态X轴和Y轴都旋转360度 */}}/style
/head
bodydiv classloader!-- 加载特效的容器 --div/divdiv/divdiv/divdiv/div/div
/body
/html十三扇形百分比加载特效
1.效果展示 2.HTML完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title扇形百分比加载特效/titlestylebody, html {margin: 0;padding: 0;/* 设置body和html元素的边距和填充为0 */width: 100%;height: 100%;/* 设置body和html元素的宽度和高度为100% */display: flex;justify-content: center;align-items: center;/* 使用Flexbox布局使内容居中 */background: radial-gradient(circle, #1e3c72, transparent);/* 设置背景为径向渐变颜色从#1e3c72渐变到透明 */font-family: Arial, sans-serif;color: white;/* 设置字体和文本颜色 */overflow: hidden;/* 隐藏溢出内容 */}.loader {position: relative;width: 200px;height: 200px;/* 设置加载器的位置和大小 */display: flex;justify-content: center;align-items: center;/* 使用Flexbox布局使内部内容居中 */}.circle {width: 100%;height: 100%;/* 设置圆的宽度和高度为100% */border-radius: 50%;/* 设置边框圆角为50%形成圆形 */border: 15px solid transparent;/* 设置边框宽度为15px颜色为透明 */border-top-color: #3498db;border-right-color: #2ecc71;border-bottom-color: #e74c3c;border-left-color: #f1c40f;/* 分别设置四个边框的颜色 */animation: spinGradient 3s linear infinite;/* 应用动画使边框颜色旋转 */box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.5), 0 0 60px rgba(255, 255, 255, 0.5);/* 添加阴影效果 */}keyframes spinGradient {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }/* 定义动画从0度旋转到360度 */}.progress {position: absolute;top: 50%;left: 50%;width: 170px;height: 170px;/* 设置进度条的位置和大小 */border-radius: 50%;/* 设置圆角为50%形成圆形 */background: conic-gradient(rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) var(--progress, 0%), transparent var(--progress, 0%), transparent 100%);/* 使用锥形渐变创建进度条效果 */transform: translate(-50%, -50%);/* 将进度条居中 */}.percentage {position: absolute;bottom: -40px;left: 50%;transform: translateX(-50%);/* 设置百分比文本的位置并水平居中 */font-size: 24px;font-weight: bold;/* 设置字体大小和加粗 */text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);/* 添加文本阴影效果 */animation: fadeInOut 2s infinite alternate;/* 应用淡入淡出动画 */}keyframes fadeInOut {0%, 100% { opacity: 1; }50% { opacity: 0.5; }/* 定义淡入淡出动画 */}/style
/head
bodydiv classloader!-- 加载器的容器 --div classcircle/div!-- 旋转的彩色圆圈 --div classprogress/div!-- 显示加载进度的圆形进度条 --div classpercentage0%/div!-- 显示加载百分比的文本 --/divscriptdocument.addEventListener(DOMContentLoaded, function() {// 当文档内容加载完成后执行以下代码const progress document.querySelector(.progress);const percentage document.querySelector(.percentage);// 获取进度条和百分比文本的DOM元素let loadProgress 0;// 初始化加载进度为0const simulateLoading setInterval(() {// 设置定时器每隔一定时间更新加载进度loadProgress 1;// 每次循环加载进度增加1percentage.innerText loadProgress %;// 更新百分比文本的显示progress.style.setProperty(--progress, ${loadProgress * 3.6}deg);// 更新进度条的CSS变量--progress以显示加载进度if (loadProgress 100) {// 当加载进度达到100%时clearInterval(simulateLoading);// 清除定时器setTimeout(() {window.location.href your-actual-page.html;}, 500);// 延迟500毫秒后跳转到指定页面}}, 100);// 定时器每隔100毫秒执行一次});/script
/body
/html十四四色圆环显现加载特效
1.效果展示 2.HTML完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title四色圆环显现加载/title stylebody, html {height: 100%; /* 高度设为100% */margin: 0; /* 去掉默认的外边距 */display: flex; /* 使用flex布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */background-color: #f0f0f0; /* 背景颜色设为浅灰色 */
}.loader-container {position: relative; /* 设置相对定位 */width: 150px; /* 宽度设为150px */height: 150px; /* 高度设为150px */
}.loader {border: 16px solid rgba(0, 0, 0, 0.1); /* 设置边框为16px宽颜色为半透明的黑色 */border-radius: 50%; /* 边框圆角设为50%形成圆形 */border-left-color: #ff0000; /* 左边框颜色设为红色 */border-right-color: #00ff00; /* 右边框颜色设为绿色 */border-top-color: #0000ff; /* 上边框颜色设为蓝色 */border-bottom-color: #ffff00; /* 下边框颜色设为黄色 */width: 0; /* 初始宽度设为0 */height: 0; /* 初始高度设为0 */animation: spin 1s linear infinite; /* 应用旋转动画持续1秒线性速度无限循环 */position: absolute; /* 设置绝对定位 */top: 50%; /* 顶部偏移设为50% */left: 50%; /* 左侧偏移设为50% */transform: translate(-50%, -50%); /* 使用transform属性将元素移动到父容器的中心 */box-sizing: border-box; /* 使用border-box盒模型 */
}keyframes spin {0% { transform: rotate(0deg); } /* 动画开始旋转0度 */100% { transform: rotate(360deg); } /* 动画结束旋转360度 */
}.loader.loading {width: 150px; /* 宽度设为150px */height: 150px; /* 高度设为150px */border-width: 8px; /* 边框宽度设为8px */animation: expand 2s cubic-bezier(0.42, 0, 0.58, 1) forwards; /* 应用扩展动画持续2秒使用贝塞尔曲线控制速度动画结束后保持最终状态 */
}.loader.hidden {display: none; /* 隐藏加载特效 */
}keyframes expand {0% {width: 0; /* 动画开始宽度为0 */height: 0; /* 动画开始高度为0 */border-width: 16px; /* 动画开始边框宽度为16px */}100% {width: 150px; /* 动画结束宽度为150px */height: 150px; /* 动画结束高度为150px */border-width: 8px; /* 动画结束边框宽度为8px */}
}/style
/head
bodydiv classloader-container !-- 加载特效的容器 --div classloader/div !-- 加载特效的元素 --/div
/body
script// 当DOM内容加载完成后执行document.addEventListener(DOMContentLoaded, () {const loader document.querySelector(.loader); // 获取加载特效的元素let cycleCount 0; // 循环计数器// 定义一个函数来控制加载特效的循环function animateLoader() {if (cycleCount 3) {// 添加loading类触发动画loader.classList.add(loading);loader.classList.remove(hidden); // 确保特效是可见的// 在动画结束后隐藏加载特效并准备下一次循环setTimeout(() {loader.classList.remove(loading);loader.classList.add(hidden); // 隐藏特效// 设置延时后再次触发动画模拟循环效果setTimeout(animateLoader, 500); // 延时500毫秒后开始下一次循环cycleCount; // 增加循环计数器}, 2000); // 动画持续2秒所以延时2秒执行} else {// 循环三次后显示加载完成的信息loader.classList.remove(loading, hidden); // 移除所有动画类loader.style.display none; // 隐藏加载特效元素const content document.createElement(div); // 创建一个新的div元素content.textContent 加载完成!; // 设置div的文本内容content.style.fontSize 24px; // 设置div的字体大小content.style.color #333; // 设置div的字体颜色document.body.appendChild(content); // 将div添加到body中}}// 初始调用动画函数animateLoader();});
/script
/html十五跷跷板加载特效
1.效果展示 2.HTML完整代码
!DOCTYPE html
html langzh
headmeta charsetutf-8title跷跷板加载/titlestylehtml, body {height: 100%;/* 设置html和body元素的高度为100% */margin: 0;/* 去除html和body元素的外边距 */display: flex;/* 设置html和body元素为flexbox布局 */justify-content: center;/* 使子元素在主轴水平方向上居中 */align-items: center;/* 使子元素在交叉轴垂直方向上居中 */}.app {width: 100px; /* 可以根据需要调整大小 *//* 设置.app元素的宽度为100px */height: 100px;/* 设置.app元素的高度为100px */background-color: #ffffff;/* 设置.app元素的背景颜色为白色 */display: flex;/* 设置.app元素为flexbox布局 */justify-content: center;/* 使子元素在主轴水平方向上居中 */align-items: center;/* 使子元素在交叉轴垂直方向上居中 */}.loading {width: 80px;/* 设置.loading73元素的宽度为80px */height: 80px;/* 设置.loading73元素的高度为80px */position: relative;/* 设置.loading73元素的定位方式为相对定位 */display: flex;/* 设置.loading73元素为flexbox布局 */justify-content: center;/* 使子元素在主轴水平方向上居中 */align-items: center;/* 使子元素在交叉轴垂直方向上居中 */transform-origin: center center;/* 设置.loading73元素的变换原点为中心点 */animation: effbox 3s cubic-bezier(0, 0.6, 1, 0.4) infinite;/* 为.loading73元素应用名为effbox73的动画动画时长为3秒使用自定义的贝塞尔曲线作为过渡效果动画无限循环 */}keyframes effbox {0% {transform: rotate(-30deg);/* 动画开始时元素旋转-30度 */}40% {transform: rotate(30deg);/* 动画进行到40%时元素旋转30度 */}50% {transform: rotate(30deg);/* 动画进行到50%时元素保持旋转30度 */}90% {transform: rotate(-30deg);/* 动画进行到90%时元素旋转回-30度 */}100% {transform: rotate(-30deg);/* 动画结束时元素保持旋转-30度 */}}.loading::before {content: ;/* 为.loading73元素的伪元素::before设置内容为空以便可以对其应用样式 */width: 100%;/* 设置伪元素的宽度为100% */height: 4px;/* 设置伪元素的高度为4px */background-color: #000;/* 设置伪元素的背景颜色为黑色 */position: absolute;/* 设置伪元素的定位方式为绝对定位 */left: 0;/* 设置伪元素的左边距为0使其紧贴父元素的左侧 */}.loading::after {content: ;/* 为.loading73元素的伪元素::after设置内容为空以便可以对其应用样式 */width: 16px;/* 设置伪元素的宽度为16px */height: 16px;/* 设置伪元素的高度为16px */background-color: #ea990c;/* 设置伪元素的背景颜色为橙黄色 */position: absolute;/* 设置伪元素的定位方式为绝对定位 */top: 21px;/* 设置伪元素的顶部边距为21px以便定位到合适的位置 */left: 0;/* 设置伪元素的左边距为0使其紧贴父元素的左侧 */border-radius: 3px;/* 设置伪元素的边框圆角为3px使其呈现圆角效果 */animation: eff 3s ease-in-out infinite;/* 为伪元素应用名为eff73的动画动画时长为3秒使用ease-in-out过渡效果动画无限循环 */}keyframes eff {0% {transform: translateX(0) rotate(0);/* 动画开始时伪元素不进行平移和旋转 */}10% {transform: translateX(16px) rotate(90deg);/* 动画进行到10%时伪元素向右平移16px并旋转90度 */}20% {transform: translateX(32px) rotate(180deg);/* 动画进行到20%时伪元素继续向右平移至32px并旋转180度 */}30% {transform: translateX(48px) rotate(270deg);/* 动画进行到30%时伪元素继续向右平移至48px并旋转270度 */}40% {transform: translateX(64px) rotate(360deg);/* 动画进行到40%时伪元素继续向右平移至64px并完成一圈旋转 */}50% {transform: translateX(64px) rotate(360deg);/* 动画进行到50%时伪元素保持位置不变和旋转状态 */}60% {transform: translateX(48px) rotate(270deg);/* 动画进行到60%时伪元素向左平移回48px并旋转回270度 */}70% {transform: translateX(32px) rotate(180deg);/* 动画进行到70%时伪元素继续向左平移至32px并旋转回180度 */}80% {transform: translateX(16px) rotate(90deg);/* 动画进行到80%时伪元素继续向左平移至16px并旋转回90度 */}90% {transform: translateX(0) rotate(0);/* 动画进行到90%时伪元素平移回原位并停止旋转 */}100% {transform: translateX(0) rotate(0);/* 动画结束时伪元素保持原位和停止旋转的状态 */}}/style
/head
bodydiv classapp!-- 创建一个.app元素作为动画的容器 --div classloading/div/div
/body
/htmlEND~温轻舟
