当前位置：首页 > news >正文

深圳品牌网站设计电话seo关键词优化指南

news 2025/7/5 14:53:20

深圳品牌网站设计电话,seo关键词优化指南,国外免费注册域名的网站,泰安程序设计文章目录一：彩球环绕加载特效1.效果展示2.HTML完整代码二：跷跷板加载特效1.效果展示2.HTML完整代码三：两个圆形加载特效1.效果展示2.HTML完整代码四：半环加载特效1.效果展示2.HTML完整代码五：音乐波动加载特效1.效…

文章目录

- - 一：彩球环绕加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码
  - 二：跷跷板加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码
  - 三：两个圆形加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码
  - 四：半环加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码
  - 五：音乐波动加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码
  - 六：四色圆环加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码
  - 七：圆环加载特效
  - - - 1.效果展示
      - 2.`HTML`完整代码

一：彩球环绕加载特效

1.效果展示

在这里插入图片描述

2.`HTML`完整代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="utf-8"><title>彩球环绕加载</title><style>body, html {height: 100%;/* 设置body和html元素高度为100% */margin: 0;/* 设置外边距为0 */display: flex;/* 使用弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */}.app {width: 100%;/* 设置宽度为100% */height: 100vh;/* 设置高度为视口高度的100% */background-color: #ffffff;/* 设置背景颜色为白色 */position: relative;/* 设置定位方式为相对定位 */display: flex;/* 使用弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */}.loading {width: 150px;/* 设置宽度为150px */height: 150px;/* 设置高度为150px */position: relative;/* 设置定位方式为相对定位 */display: flex;/* 使用弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */}.circle {width: 24px;/* 设置圆形宽度为24px */height: 24px;/* 设置圆形高度为24px */border-radius: 50%;/* 设置边框圆角为50%，使其成为圆形 */position: absolute;/* 设置定位方式为绝对定位 */animation: eff 2.5s ease-in-out infinite;/* 应用动画，持续时间为2.5秒，缓动效果为ease-in-out，无限循环 */mix-blend-mode: darken;/* 设置混合模式为darken */filter: blur(2px);/* 设置模糊效果为2px */}/* 为每个圆形设置不同的背景颜色和动画延迟 */.circle:nth-child(1) { background-color: #FF0000; animation-delay: 0s; }/* 第一个圆形，红色，无延迟 */.circle:nth-child(2) { background-color: #00FF00; animation-delay: 0.5s; }/* 第二个圆形，绿色，延迟0.5秒 */.circle:nth-child(3) { background-color: #0000FF; animation-delay: 1s; }/* 第三个圆形，蓝色，延迟1秒 */.circle:nth-child(4) { background-color: #FFFF00; animation-delay: 1.5s; }/* 第四个圆形，黄色，延迟1.5秒 */.circle:nth-child(5) { background-color: #FF00FF; animation-delay: 2s; }/* 第五个圆形，紫色，延迟2秒 */@keyframes eff {0% { transform: rotate(0deg) translateX(70px) rotate(0deg); }/* 初始状态，无旋转和位移 */20% { transform: rotate(72deg) translateX(70px) rotate(-72deg); }/* 20%时，旋转72度并位移，然后反向旋转72度 */40% { transform: rotate(144deg) translateX(70px) rotate(-144deg); }/* 40%时，继续旋转并位移，然后反向旋转 */60% { transform: rotate(216deg) translateX(70px) rotate(-216deg); }/* 60%时，继续旋转并位移，然后反向旋转 */80% { transform: rotate(288deg) translateX(70px) rotate(-288deg); }/* 80%时，继续旋转并位移，然后反向旋转 */100% { transform: rotate(360deg) translateX(70px) rotate(-360deg); }/* 100%时，完成一圈旋转并回到初始位置 */}</style>
</head>
<body><div class="app"><div class="loading"><!-- 加载效果容器 --><div class="circle"></div><!-- 圆形1 --><div class="circle"></div><!-- 圆形2 --><div class="circle"></div><!-- 圆形3 --><div class="circle"></div><!-- 圆形4 --><div class="circle"></div><!-- 圆形5 --></div></div>
</body>
</html>

二：跷跷板加载特效

1.效果展示

在这里插入图片描述

2.`HTML`完整代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="utf-8"><title>跷跷板加载</title><style>html, body {height: 100%;/* 设置html和body元素高度为100% */margin: 0;/* 设置外边距为0 */display: flex;/* 使用弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */background-color: #282c34;/* 设置背景颜色为深灰色 */}.app {width: 200px; /* 设置app容器宽度为200px，增大尺寸以展示更多细节 */height: 200px;/* 设置app容器高度为200px */display: flex;/* 使用弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */}.loading73 {width: 100px;/* 设置加载动画元素宽度为100px */height: 100px;/* 设置加载动画元素高度为100px */position: relative;/* 设置定位方式为相对定位 */display: flex;/* 使用弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */transform-origin: center center;/* 设置变换原点为中心点 */animation: effbox73 4s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;/* 应用动画，持续时间为4秒，缓动效果为cubic-bezier，无限循环 */}@keyframes effbox73 {0% {transform: rotate(-45deg);/* 初始状态旋转-45度 */}25% {transform: rotate(45deg);/* 25%时旋转45度 */}50% {transform: rotate(-45deg);/* 50%时再次旋转-45度 */}75% {transform: rotate(45deg);/* 75%时再次旋转45度 */}100% {transform: rotate(-45deg);/* 100%时回到初始状态旋转-45度 */}}.loading73::before {content: '';/* 伪元素必须设置content属性 */width: 100%;/* 设置伪元素宽度为100% */height: 6px;/* 设置伪元素高度为6px */background: linear-gradient(to right, #ff7e5f, #feb47b);/* 设置背景为线性渐变颜色 */position: absolute;/* 设置定位方式为绝对定位 */left: 0;/* 设置左边距为0 */top: 50%;/* 设置上边距为50% */transform: translateY(-50%);/* 垂直居中 */border-radius: 3px;/* 设置边框圆角为3px */}.loading73::after {content: '';/* 伪元素必须设置content属性 */width: 20px;/* 设置伪元素宽度为20px */height: 20px;/* 设置伪元素高度为20px */background: radial-gradient(circle, #ea990c, #ff5f6d);/* 设置背景为径向渐变颜色 */position: absolute;/* 设置定位方式为绝对定位 */top: 15px;/* 设置上边距为15px */left: -10px;/* 设置左边距为-10px，使其部分移出父元素 */border-radius: 50%;/* 设置边框圆角为50%，使其成为圆形 */animation: eff73 4s ease-in-out infinite;/* 应用动画，持续时间为4秒，缓动效果为ease-in-out，无限循环 */box-shadow: 0 0 10px rgba(255, 95, 109, 0.7);/* 设置盒阴影效果 */}@keyframes eff73 {0% {transform: translateX(0) scale(1);/* 初始状态不移动，不缩放 */}20% {transform: translateX(40px) scale(1.2) rotate(90deg);/* 20%时向右移动40px，缩放1.2倍，旋转90度 */}40% {transform: translateX(80px) scale(1) rotate(180deg);/* 40%时向右移动80px，不缩放，旋转180度 */}60% {transform: translateX(40px) scale(0.8) rotate(270deg);/* 60%时向右移动40px，缩放0.8倍，旋转270度 */}80% {transform: translateX(0) scale(1) rotate(360deg);/* 80%时不移动，不缩放，旋转360度 */}100% {transform: translateX(0) scale(1);/* 100%时回到初始状态不移动，不缩放 */}}</style>
</head>
<body><div class="app"><div class="loading73"></div></div>
</body>
</html>

三：两个圆形加载特效

1.效果展示

在这里插入图片描述

2.`HTML`完整代码

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><title>两个圆形加载</title><style>body, html {height: 100%; /* 设置高度为100% */margin: 0; /* 设置外边距为0 */display: flex; /* 设置布局为弹性盒布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */}.app{width: 100%; /* 宽度为100% */height: 100vh; /* 高度为视口高度的100% */background-color: #ffffff; /* 背景颜色为白色 */position: relative; /* 设置定位方式为相对定位 */display: flex; /* 设置布局为弹性盒布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}
.loading{width: 100px; /* 宽度为100像素 */height: 60px; /* 高度为60像素 */position: relative; /* 设置定位方式为相对定位 */display: flex; /* 设置布局为弹性盒布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}
.circle{width: 24px; /* 宽度为24像素 */height: 24px; /* 高度为24像素 */border-radius: 50%; /* 边框圆角为50%，形成圆形 */position: absolute; /* 设置定位方式为绝对定位 */animation: eff 2s ease-in-out infinite; /* 应用动画eff64，持续2秒，缓动效果为ease-in-out，无限循环 */mix-blend-mode: darken; /* 混合模式为darken */filter: blur(2px); /* 模糊效果为2像素 */
}
.circle:nth-child(1){background-color: #00FFFF; /* 背景颜色为青色 */
}
.circle:nth-child(2) {background-color: #FFFF00; /* 背景颜色为黄色 */animation-delay: 1s; /* 动画延迟1秒执行 */
}
@keyframes eff{0%, 50%, 100% {transform: translateX(0) /* 在0%、50%、100%时，水平位移为0 */}25% {transform: translateX(70%) /* 在25%时，水平位移为70% */}75% {transform: translateX(-70%) /* 在75%时，水平位移为-70% */}
}</style></head><body><div class="app"><div class="loading"><div class="circle"></div><div class="circle"></div></div></div></body>
</html>

四：半环加载特效

1.效果展示

在这里插入图片描述

2.`HTML`完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>半环加载特效</title><style>body {display: flex; /* 设置body为弹性盒布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 设置高度为视口高度的100% */margin: 0; /* 设置外边距为0 */background-color: #282c34; /* 设置背景颜色为深灰色 */overflow: hidden; /* 防止滚动条出现，隐藏超出视口的内容 */
}.loader {position: relative; /* 设置相对定位 */width: 100px; /* 设置宽度为100像素 */height: 100px; /* 设置高度为100像素 */
}.loader::before, .loader::after {content: ''; /* 伪元素必须设置content属性 */position: absolute; /* 设置绝对定位 */top: 0; /* 设置顶部距离为0 */left: 0; /* 设置左边距离为0 */width: 100%; /* 设置宽度为100% */height: 100%; /* 设置高度为100% */border-radius: 50%; /* 设置边框圆角为50%，形成圆形 */border: 6px solid transparent; /* 设置边框为6像素宽，透明色 */border-top-color: #3498db; /* 设置顶部边框颜色为蓝色 */animation: spin 1.5s linear infinite, gradientColor 6s ease infinite; /* 应用两个动画：旋转和颜色渐变，无限循环 */
}.loader::after {border-top-color: #ff5733; /* 另一层使用橙色作为顶部边框颜色 */animation-delay: -0.75s; /* 使两层动画错开，形成视觉效果差异 */transform: scale(0.8); /* 使第二层稍小一些，形成层次感 */
}@keyframes spin {0% {transform: rotate(0deg); /* 初始状态，不旋转 */}100% {transform: rotate(360deg); /* 结束状态，旋转360度 */}
}@keyframes gradientColor {0%, 100% {border-top-color: #3498db; /* 动画开始和结束时，顶部边框颜色为蓝色 */}50% {border-top-color: #9b59b6; /* 动画中间时，顶部边框颜色变为紫色 */}
}</style>
</head>
<body><div class="loader"></div>
</body>
</html>

五：音乐波动加载特效

1.效果展示

在这里插入图片描述

2.`HTML`完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>音乐波动加载</title><style>body, html {height: 100%; /* 设置高度为100% */margin: 0; /* 设置外边距为0 */display: flex; /* 设置布局为弹性盒布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */}.boxMain {width: 84px; /* 设置宽度为84px */height: 32px; /* 设置高度为32px */display: flex; /* 设置布局为弹性盒布局 */justify-content: space-between; /* 子元素之间均匀分布空间 */align-items: flex-end; /* 子元素在交叉轴上向下对齐 */position: relative; /* 相对于其正常位置进行定位 */}.boxItem {width: 6px; /* 设置宽度为6px */box-sizing: border-box; /* 设置盒模型为边框盒模型 */background-color: #97e138; /* 设置背景颜色 */animation: itemAnimate 2s linear infinite; /* 应用动画，持续2秒，线性，无限循环 */box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #97e138; /* 设置盒阴影 */}.boxItem:nth-of-type(2) {background-color: #0421b1; /* 设置背景颜色 */animation-delay: 0.3s; /* 动画延迟0.3秒 */animation-duration: 2.0s; /* 动画持续2.0秒 */box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #0421b1; /* 设置盒阴影 */}.boxItem:nth-of-type(3) {background-color: #c00ee8; /* 设置背景颜色 */animation-delay: 0.38s; /* 动画延迟0.38秒 */box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #c00ee8; /* 设置盒阴影 */}.boxItem:nth-of-type(4) {background-color: #eb2406; /* 设置背景颜色 */animation-delay: 0.5s; /* 动画延迟0.5秒 */box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #eb2406; /* 设置盒阴影 */}.boxItem:nth-of-type(5) {background-color: #fff200; /* 设置背景颜色 */animation-duration: 2.4s; /* 动画持续2.4秒 */box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #fff200; /* 设置盒阴影 */}@keyframes itemAnimate {0% {height: 0; /* 动画开始时高度为0 */}50% {height: 32px; /* 动画进行到50%时高度为32px */}100% {height: 0; /* 动画结束时高度为0 */}}</style>
</head>
<body><div class="boxMain"><div class="boxItem"></div><div class="boxItem"></div><div class="boxItem"></div><div class="boxItem"></div><div class="boxItem"></div></div>
</body>
</html>

六：四色圆环加载特效

1.效果展示

在这里插入图片描述

2.`HTML`完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>四色圆环加载</title> <style>body, 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) infinite alternate; /* 应用扩展动画，持续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>
<body><div class="loader-container"><div class="loader loading"></div> </div>
</body>
<script>document.addEventListener('DOMContentLoaded', () => {const loader = document.querySelector('.loader');});
</script>
</html>

七：圆环加载特效

1.效果展示

在这里插入图片描述

2.`HTML`完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复杂炫酷页面加载特效</title><style>body, html {margin: 0;/* 设置外边距为0 */padding: 0;/* 设置内边距为0 */width: 100%;/* 设置宽度为100% */height: 100%;/* 设置高度为100% */font-family: Arial, sans-serif;/* 设置字体 */display: flex;/* 使用弹性盒布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */background-color: #1e1e1e;/* 设置背景颜色 */overflow: hidden;/* 隐藏超出容器的内容 */}#loader-wrapper {position: fixed;/* 固定定位 */width: 100%;/* 设置宽度为100% */height: 100%;/* 设置高度为100% */display: flex;/* 使用弹性盒布局 */flex-direction: column;/* 设置为垂直方向 */justify-content: center;/* 垂直居中 */align-items: center;/* 水平居中 */z-index: 9999;/* 设置层叠顺序 */background: linear-gradient(to right, #ff7e5f, #feb47b);/* 设置背景为线性渐变 */animation: gradient-animation 5s infinite;/* 应用渐变动画，5秒无限循环 */}@keyframes gradient-animation {0% { background-position: 0% 50%; }/* 起始位置 */50% { background-position: 100% 50%; }/* 中间位置 */100% { background-position: 0% 50%; }/* 结束位置，回到起始 */}#loader {border: 16px solid #f3f3f3;/* 设置边框颜色 */border-radius: 50%;/* 设置边框圆角为50%，形成圆形 */border-top: 16px solid #3498db;/* 设置顶部边框颜色，形成旋转效果 */width: 120px;/* 设置宽度 */height: 120px;/* 设置高度 */animation: spin 2s linear infinite;/* 应用旋转动画，2秒线性无限循环 */}#loader-text {margin-top: 20px;/* 设置上边距 */font-size: 24px;/* 设置字体大小 */color: #fff;/* 设置字体颜色 */font-weight: bold;/* 设置字体加粗 */text-transform: uppercase;/* 设置文本为大写 */letter-spacing: 2px;/* 设置字符间距 */animation: fade-in-out 2s infinite;/* 应用淡入淡出动画，2秒无限循环 */}@keyframes spin {0% { transform: rotate(0deg); }/* 起始角度 */100% { transform: rotate(360deg); }/* 结束角度，旋转一圈 */}@keyframes fade-in-out {0%, 100% { opacity: 1; }/* 起始和结束时完全不透明 */50% { opacity: 0.5; }/* 中间半透明 */}</style>
</head>
<body><div id="loader-wrapper"><div id="loader"></div><div id="loader-text">加载中...</div></div>
</body>
</html>

http://www.tj-hxxt.cn/news/8333.html

相关文章：

免费手机建网站平台抖音推广方式有哪些

吉林省建设厅网站市政建设陕西企业网站建设

网站建设意见反馈表网站建站流程

网站设计与网页制作教程药品销售推广方案

网站开发中使用框架吗长春seo排名扣费

网站模板框架seo专员是什么职业

营销型外贸网站建设软件怎样注册自己网站的域名

学校要求做网站如何优化seo关键词

厦门站长优化工具网络广告营销的概念

怎么做网站弹窗通知广东广州疫情最新情况

做设计用哪个素材网站宁波靠谱营销型网站建设

手机端做网站软件seo黑帽是什么

西昌网站建设优化网站价格

如何做网站站长中国2022年重大新闻

定西企业网站制作网上教育培训机构排名

如何做网站建设业务员今日最新财经新闻

建设网站筛选网站供应商百度竞价推广怎么做效果好

公司主页网站开发谷歌三件套

网站建设怎么做账谷歌google play下载

功能性质网站有哪些网站系统推广公司

wordpress 导航跳转seo建站网络公司

网站设计形式成人职业技术培训学校

b2b网站需要解决哪些问题搜索引擎优化的主要手段

网站突然找不到了然后降权重排名不变最新新闻热点话题

网站开发项目工作分解建网站找哪个平台好呢

建设厅网站上报名苏州seo网站优化软件

WordPress4中文手册下载seo推广网址

威海专业做网站设计的公司神马移动排名优化

网站套餐到期啥意思搜索引擎优化的技巧有哪些

绵阳公司网站建设淘宝关键词搜索排行榜