中国红客联盟国际站联盟介绍联盟架构联盟文化联盟事记联盟邮箱购买特权捐助我们收藏本站
请登录
立即注册
首页Portal
资讯
圈子Group
贡献榜
关于我们
红客起源事记
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程代码交流 › html+css实现环绕倒影加载特效

[前端] html+css实现环绕倒影加载特效

1728 0
Honkers 2022-10-19 15:46:30 | 显示全部楼层 |阅读模式
本文主要介绍了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%{
  13.                 transform: rotate(0deg);
  14.             }
  15.             100%{
  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;
  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;
  20.         }
复制代码
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;
  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;
  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%{
  53.                 transform: rotate(0deg);
  54.             }
  55.             100%{
  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.         }
  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;
  80.         }
  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;
  101.         }
  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环绕倒影加载内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Honkers

特级红客

关注
  • 3142
    主题
  • 36
    粉丝
  • 0
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天