经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
html+css实现环绕倒影加载特效_HTML/Xhtml
来源：jb51　　时间：2021/7/12 9:40:24　　对本文有异议

本文主要介绍了html+css实现环绕倒影加载特效，具体如下：

先看效果（完整代码在底部）：

在这里插入图片描述

实现（可一步一步边看效果边编写）：

※先初始化（直接复制）：

  1.  *{
  2.             margin: 0;
  3.             padding: 0;
  4.             box-sizing: border-box;
  5.         }
  6.  body{
  7.             height: 100vh;
  8.             display: flex;
  9.             justify-content: center;
  10.             align-items: center;
  11.             background-color: rgb(7, 15, 26);
  12.         }

flex布局，让子元素居中对齐。

1.定义标签：

  1. <div class="container">
  2.         <span>Loading...</span>
  3.         <div class="circle">
  4.             <div class="ring"></div>
  5.         </div>
  6.     </div>

.container是最底层盒子。
span是文本。
.circle是底层圆形盒子。
.ring是那个蓝色环。

2. .container的css样式：

  1. .container{
  2.             position: relative;
  3.             height: 150px;
  4.             width: 250px;
  5.             -webkit-box-reflect:below 1px linear-gradient(transparent  ,rgb(7, 15, 26));
  6.         }

-webkit-box-reflect：该属性能实现倒影特效。详细。

3. .circle的css样式，动画部分可暂时注释掉：

  1. .circle{
  2.             position: relative;
  3.             margin: 0 auto;
  4.             height: 150px;
  5.             width: 150px;
  6.             background-color: rgb(13, 10, 37);
  7.             border-radius: 50%;
  8.             animation: zhuan 2s linear infinite;
  9.         }
  10.         @keyframes zhuan{
  11.             0%{ 
  12.                
  13.                 transform: rotate(0deg);
  14.             }
  15.             100%{
  16.                 
  17.                  transform: rotate(360deg);
  18.             }
  19.         }

margin: 0 auto;居中。
border-radius: 50%; 角弧度。
animation: zhuan 2s linear infinite; 设置动画，让其旋转。
transform: rotate(…deg); 旋转角度。

4. 定义一个双伪类，为一个与背景色相同的小圆，覆盖在.circle上：

  1. .circle::after{
  2.             content: '';
  3.             position: absolute;
  4.             top: 10px;
  5.             left: 10px;
  6.             right: 10px;
  7.             bottom: 10px;
  8.             background-color: rgb(7, 15, 26);
  9.             border-radius: 50%;
  10.         }

5.定义蓝色环形效果，因为被第4步的小圆覆盖了，所以直接定义一个渐变的蓝色圆形即可得到蓝色环形：

  1. .ring{
  2.             position: absolute;
  3.             top: 0;
  4.             left: 0;
  5.             width: 75px;
  6.             height: 150px;
  7.             background-image: linear-gradient(180deg,rgb(22, 121, 252) ,transparent 80%);
  8.             border-radius: 75px 0 0 75px;
  9.             
  10.         }

background-image: linear-gradient(180deg,rgb(22, 121, 252) ,transparent 80%); 渐变颜色，先蓝色，过渡到透明色。

6.定义环形上发光的小圆球：

  1. .ring::after{
  2.             content: '';
  3.             position: absolute;
  4.             right: -5px;
  5.             top: -2.5px;
  6.             width: 15px;
  7.             height: 15px;
  8.             background-color: rgb(40, 124, 202);
  9.             box-shadow: 0 0 5px rgb(40, 151, 202),
  10.             0 0 10px rgb(40, 124, 202),
  11.             0 0 20px rgb(40, 124, 202),
  12.             0 0 30px rgb(40, 124, 202),
  13.             0 0 40px rgb(40, 124, 202),
  14.             0 0 50px rgb(40, 124, 202),
  15.             0 0 60px rgb(40, 124, 202),
  16.             0 0 60px rgb(40, 124, 202);
  17.             border-radius: 50%;
  18.             z-index: 1;
  19.             
  20.         }
  21.

box-shadow: 阴影。
z-index: 1; 显示在最上层。

7. 定义文本loading：

  1. .container>span{
  2.             position: absolute;
  3.             left: 50%;
  4.             top: 50%;
  5.             transform: translate(-50%,-50%);
  6.             color: rgb(20, 129, 202);
  7.             text-shadow: 0 0 10px rgb(20, 129, 202),
  8.             0 0 30px rgb(20, 129, 202),
  9.             0 0 60px rgb(20, 129, 202),
  10.             0 0 100px rgb(20, 129, 202);
  11.             font-size: 18px;
  12.             z-index: 1;
  13.        
  14.         }

left: 50%;
top: 50%;
transform: translate(-50%,-50%); 居中对齐。
text-shadow: 文字阴影。

完整代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         body{
  15.             height: 100vh;
  16.             display: flex;
  17.             justify-content: center;
  18.             align-items: center;
  19.             background-color: rgb(7, 15, 26);
  20.         }
  21.         .container{
  22.             position: relative;
  23.             height: 150px;
  24.             width: 250px;
  25.             -webkit-box-reflect:below 1px linear-gradient(transparent  ,rgb(7, 15, 26));
  26.         }
  27.         .container>span{
  28.             position: absolute;
  29.             left: 50%;
  30.             top: 50%;
  31.             transform: translate(-50%,-50%);
  32.             color: rgb(20, 129, 202);
  33.             text-shadow: 0 0 10px rgb(20, 129, 202),
  34.             0 0 30px rgb(20, 129, 202),
  35.             0 0 60px rgb(20, 129, 202),
  36.             0 0 100px rgb(20, 129, 202);
  37.             font-size: 18px;
  38.             z-index: 1;
  39.        
  40.         }     
  41.         .circle{
  42.             position: relative;
  43.             margin: 0 auto;
  44.             height: 150px;
  45.             width: 150px;
  46.             background-color: rgb(13, 10, 37);
  47.             border-radius: 50%;
  48.             animation: zhuan 2s linear infinite;
  49.         }
  50.         @keyframes zhuan{
  51.             0%{ 
  52.                
  53.                 transform: rotate(0deg);
  54.             }
  55.             100%{
  56.                 
  57.                  transform: rotate(360deg);
  58.             }
  59.         }
  60.         .circle::after{
  61.             content: '';
  62.             position: absolute;
  63.             top: 10px;
  64.             left: 10px;
  65.             right: 10px;
  66.             bottom: 10px;
  67.             background-color: rgb(7, 15, 26);
  68.             border-radius: 50%;
  69.         }
  70.         
  71.         .ring{
  72.             position: absolute;
  73.             top: 0;
  74.             left: 0;
  75.             width: 75px;
  76.             height: 150px;
  77.             background-image: linear-gradient(180deg,rgb(22, 121, 252) ,transparent 80%);
  78.             border-radius: 75px 0 0 75px;
  79.             
  80.         }
  81.         
  82.         .ring::after{
  83.             content: '';
  84.             position: absolute;
  85.             right: -5px;
  86.             top: -2.5px;
  87.             width: 15px;
  88.             height: 15px;
  89.             background-color: rgb(40, 124, 202);
  90.             box-shadow: 0 0 5px rgb(40, 151, 202),
  91.             0 0 10px rgb(40, 124, 202),
  92.             0 0 20px rgb(40, 124, 202),
  93.             0 0 30px rgb(40, 124, 202),
  94.             0 0 40px rgb(40, 124, 202),
  95.             0 0 50px rgb(40, 124, 202),
  96.             0 0 60px rgb(40, 124, 202),
  97.             0 0 60px rgb(40, 124, 202);
  98.             border-radius: 50%;
  99.             z-index: 1;
  100.             
  101.         }
  102.       
  103.     </style>
  104. </head>
  105. <body>
  106.     <div class="container">
  107.         <span>Loading...</span>
  108.         <div class="circle">
  109.             <div class="ring"></div>
  110.         </div>
  111.     </div>
  112. </body>
  113. </html>

总结：

到此这篇关于html+css实现环绕倒影加载特效的文章就介绍到这了,更多相关html+css环绕倒影加载内容请搜索w3xue以前的文章或继续浏览下面的相关文章，希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号