用HTML+CSS制作炫酷的环绕倒影加载的代码是什�
Admin 2022-06-14 群英技术资�
本文主要介绍了html+css实现环绕倒影加载特效,具体如下:
先看效果(完整代码在底部):
※先初始化(直接复制):
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgb(7, 15, 26); }
flex布局,让子元素居中对齐�
<div class="container"> <span>Loading...</span> <div class="circle"> <div class="ring"></div> </div> </div>
.container是最底层盒子�
span是文本�
.circle是底层圆形盒子�
.ring是那个蓝色环�
.container{ position: relative; height: 150px; width: 250px; -webkit-box-reflect:below 1px linear-gradient(transparent ,rgb(7, 15, 26)); }
-webkit-box-reflect:该属性能实现倒影特效。详细�
.circle{ position: relative; margin: 0 auto; height: 150px; width: 150px; background-color: rgb(13, 10, 37); border-radius: 50%; animation: zhuan 2s linear infinite; } @keyframes zhuan{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }
margin: 0 auto;居中�
border-radius: 50%; 角弧度�
animation: zhuan 2s linear infinite; 设置动画,让其旋转�
transform: rotate(…deg); 旋转角度�
.circle::after{ content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; background-color: rgb(7, 15, 26); border-radius: 50%; }
.ring{ position: absolute; top: 0; left: 0; width: 75px; height: 150px; background-image: linear-gradient(180deg,rgb(22, 121, 252) ,transparent 80%); border-radius: 75px 0 0 75px; }
background-image: linear-gradient(180deg,rgb(22, 121, 252) ,transparent 80%); 渐变颜色,先蓝色,过渡到透明色�
.ring::after{ content: ''; position: absolute; right: -5px; top: -2.5px; width: 15px; height: 15px; background-color: rgb(40, 124, 202); box-shadow: 0 0 5px rgb(40, 151, 202), 0 0 10px rgb(40, 124, 202), 0 0 20px rgb(40, 124, 202), 0 0 30px rgb(40, 124, 202), 0 0 40px rgb(40, 124, 202), 0 0 50px rgb(40, 124, 202), 0 0 60px rgb(40, 124, 202), 0 0 60px rgb(40, 124, 202); border-radius: 50%; z-index: 1; }
box-shadow: 阴影�
z-index: 1; 显示在最上层�
.container>span{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: rgb(20, 129, 202); text-shadow: 0 0 10px rgb(20, 129, 202), 0 0 30px rgb(20, 129, 202), 0 0 60px rgb(20, 129, 202), 0 0 100px rgb(20, 129, 202); font-size: 18px; z-index: 1; }
left: 50%;
top: 50%;
transform: translate(-50%,-50%); 居中对齐�
text-shadow: 文字阴影�
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgb(7, 15, 26); } .container{ position: relative; height: 150px; width: 250px; -webkit-box-reflect:below 1px linear-gradient(transparent ,rgb(7, 15, 26)); } .container>span{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: rgb(20, 129, 202); text-shadow: 0 0 10px rgb(20, 129, 202), 0 0 30px rgb(20, 129, 202), 0 0 60px rgb(20, 129, 202), 0 0 100px rgb(20, 129, 202); font-size: 18px; z-index: 1; } .circle{ position: relative; margin: 0 auto; height: 150px; width: 150px; background-color: rgb(13, 10, 37); border-radius: 50%; animation: zhuan 2s linear infinite; } @keyframes zhuan{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } .circle::after{ content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; background-color: rgb(7, 15, 26); border-radius: 50%; } .ring{ position: absolute; top: 0; left: 0; width: 75px; height: 150px; background-image: linear-gradient(180deg,rgb(22, 121, 252) ,transparent 80%); border-radius: 75px 0 0 75px; } .ring::after{ content: ''; position: absolute; right: -5px; top: -2.5px; width: 15px; height: 15px; background-color: rgb(40, 124, 202); box-shadow: 0 0 5px rgb(40, 151, 202), 0 0 10px rgb(40, 124, 202), 0 0 20px rgb(40, 124, 202), 0 0 30px rgb(40, 124, 202), 0 0 40px rgb(40, 124, 202), 0 0 50px rgb(40, 124, 202), 0 0 60px rgb(40, 124, 202), 0 0 60px rgb(40, 124, 202); border-radius: 50%; z-index: 1; } </style> </head> <body> <div class="container"> <span>Loading...</span> <div class="circle"> <div class="ring"></div> </div> </div> </body> </html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章主要介绍了css子元素相对父元素进行定位的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
在css中,可以利用“font-size”属性来去掉img元素的默认间距,该属性用于设置元素内的字体大小,当img的父元素属性的值为�0”时,就会去掉元素内img元素的默认间距,语法为“img父元素{font-size:0;}”�
这篇文章主要介绍了HTML行内元素与块级元素有哪些及区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
使用css怎样做一个伸缩input搜索框效果?在实际的项目中,我们常会遇到搜索框的实现需求,下文实现的搜索框效果是可伸缩的搜索框,实现效果如下,这里会使用到css3+贝塞尔曲线这个效果�
经常听歌的朋友应该都有留意的,一般歌词的进度会跟着音乐的进度滚动显示,而一些歌词还有填充颜色的效果,那么给文字填充颜色的效果是怎样做的呢?下面我们就来看看用css3实现随进度歌词文字左到右填充颜色的示例�
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078