CSS聚光加载效果-loadering

最新推荐文章于 2024-08-26 17:02:51 发布
最新推荐文章于 2024-08-26 17:02:51 发布
阅读量177 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45762499/article/details/120623413
版权

CSS 动画 加载指示器 圆形背景 旋转效果
关键词由CSDN通过智能技术生成

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<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">
    <link rel="stylesheet" href="../css/frosted-glass.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="loader">
            <span></span>
        </div>
    </div>
</body>

</html>

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #092d36;
}
.container{
    position: relative;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-box-reflect: below 1px linear-gradient(#0001,#0004);
}
.container .loader{
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #07252d;
    animation: animate 2s linear infinite;
}
@keyframes animate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.container .loader::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to top,transparent,rgba(0,255,249,0.4));
    background-size: 100px 180px;
    background-repeat: no-repeat;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}
.container .loader::after{
    content: "";
    position: absolute;
    top: 0;
    left:50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #00fff9;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 10px #00fff9,
                0 0 20px #00fff9,
                0 0 30px #00fff9,
                0 0 40px #00fff9,
                0 0 50px #00fff9,
                0 0 60px #00fff9,
                0 0 70px #00fff9,
                0 0 80px #00fff9,
                0 0 90px #00fff9,
                0 0 100px #00fff9;
    
}
.container .loader span{
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    background: #092d36;
    border-radius: 50%;
}
商商阡胤
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
82.纯CSS液体加载特效
粉丝们务必加入微信粉丝群
08-29 1137
效果 (源码网盘地址在最后) 演示视频 【前端特效 82】纯CSS液体加载特效 视频地址一：https://www.ixigua.com/6864859179090346508/ 视频地址二：https://www.bilibili.com/video/BV1Dh41197Lf/ 源码 index.html <!DOCTYPE html> <html lang="en
CSS--box-shadow
weixin_52283867的博客
05-27 5044
前言 本文主要是简单学习下box-shadow这一属性的使用方式，如有错误请大家多多指正！！ 正题 简介 box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。 参数理解 X轴偏移量（h-shadow） 这个值必需的，表示水平阴影的位置，允许负值 正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur值会有模糊效果 Y轴偏移量（v-shado
css液体加载动画
m0_48478236的博客
07-25 213
css液体加载动画效果，很丝滑，但没什么用
liquid css
09-28
Lorem ipsum dolor sit amet, consectetuer adipiscing est elit. Quisque fringilla. Aenean quam. Donec magna arcu, ornareit amet, gravida eget, elementum ut, sapien. Proin augue velita, at, vulputate ac, dignissim non, nunc. Pellentesque at lectus. ante ipsum primis in faucibus orci luctus et ultrices.
html5液体效果,HTML5/CSS3/SVG实现的液体掉落（滑落）动画
weixin_35697229的博客
06-04 278
CSS语言：CSSSCSS确定@import url("https://fonts.googleapis.com/css?family=Raleway:300,700,900");body {background: #5444c4;color: #FFF;margin: 0;font-family: 'Raleway', sans-serif;text-align: center;letter-s...
用CSS制作三栏液态布局
weixin_34361881的博客
12-27 108
下面是CSS代码： body {     margin: 0px;     padding: 0px;}div#header {     clear: both;     height: 50px;     background-color: aqua;     padding: 1px;}div#left {     float: left;     width: 150px;     bac...
使用css中的canvas完成的聚光灯效果
05-09
聚光灯效果，使用css中的canvas完成的聚光灯效果，利用js控制光圈的移动。从而实现中间的空白效果。
关于postcss-px-to-viewport的使用经验
An_cf的博客
12-31 6310
最近在工作项目使用中新接触到postcss-px-to-viewport，在使用上遇到一个坑，也有段时间没更新啦，记录分享一下~希望对你有所帮助！ 直接上重点，节省在网站苦苦寻找有效答案的你 >>> 我所遇到的坑： 由于项目需要，需要适配不同分辨率的终端设备，比如我接到的项目需求是1920*1080以及1200*1920；如果使用过postcss-px-to-viewport的话，我们知道适配一种尺寸在配置时设置viewportWidth就可以，那如果适配两种呢？ 一开始我想到的是
CSS3中font-face属性的用法详解
weixin_42723136的博客
07-23 3936
CSS3中font-face属性的用法详解 @font-face是CSS3中的一个模块，主要是把自定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体。你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及页面中的手写英文体，很多朋友问我如何使用，能让自己的页面也支持这样的自定
【CSS】 用CSS3---text-shadow---制作艺术字效果
weixin_44044705的博客
05-24 4914
CSS艺术字效果 实现原理 通过CSS3新特性text-shadow文字阴影实现霓虹灯字效果 text-shadow使用方法 text-shadow：水平偏移距离 垂直偏移距离 模糊度(px) 颜色； 实例 单重阴影 .d1{ color: #fff; text-shadow: 0px 0px 10px black; } 多重阴影 .d2{ color: white; text-shadow: 0px 0px 20px yellow,
CSS3液体形态Loading加载动画特效
06-11
一款很有创意的CSS3液体形态Loading加载动画特效，这是一个正方形，正方形内液体流动动画效果，背景颜色也会不断变化。
HTML5 SVG和CSS3炫酷液态菜单按钮特效
12-12
这是一款使用HTML5 SVG Filters 和CSS3制作的效果非常炫酷的液态菜单按钮特效。该菜单特效开始时显示一个主菜单按钮，当点击该按钮时，子菜单按钮会像液态物质一样依次展开，其效果就像一粒水滴分离为两粒一样。
纯CSS3液态胶合效果环形菜单特效
ItStar
09-18 612
点击上方蓝字关注我哦我们要实现这样的效果,首先看我们的html结构<div class="wrap"> <input type="ch...
彩色发光液体碗动画效果（纯css+html)
weixin_63175492的博客
02-09 135
用纯css+html制作一个会BLING BLING闪的碗，且水会随碗的摇晃而摇晃
css 实现水滴动画
weixin_53561783的博客
02-01 499
这个水滴动画在视觉效果上看着是动态图，有需要的小伙伴直接可以参考代码。
css液体样式文本js特效
ICode联盟
08-05 59
css+js实现的液体样式文本特效。
css3液态动画按钮
ICode联盟
06-19 178
下载地址css3液态动画按钮，很酷的圆角按钮，看起来像液体流动效果。dd:
HTML和CSS在文本创建液体填充动画效果
X W F
08-26 443
HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>用HTML和CSS在文本上如何创建液体填充动画效果？</title>
CSS中禁用DOM事件
最新发布
bingmoujs的博客
08-26 300
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
css实现文字聚光灯效果
09-09
### 回答1： 要实现文字聚光灯效果，可以使用CSS的radial-gradient属性。这个属性可以创建一个从一个中心点向四周辐射的渐变效果，通过设置透明度，可以实现聚光灯的效果。 以下是一个基本的示例代码，用于创建一个简单的文字聚光灯效果： ```html <div class="spotlight"> <h1>聚光灯效果</h1> </div> ``` ```css .spotlight { background: radial-gradient(circle at center, transparent 100px, #000 120px); display: inline-block; } .spotlight h1 { font-size: 3em; color: #fff; text-align: center; text-shadow: 0 0 10px #000; } ``` 在上面的代码中，我们首先创建了一个容器元素（`<div class="spotlight">`），并将它的背景设置为一个径向渐变。这个径向渐变以圆心为中心，从圆心开始向外辐射，渐变颜色从透明到黑色。透明区域的大小为100px，黑色区域的大小为120px，这个大小可以根据需要进行调整。 接下来，我们设置标题元素（`<h1>`）的样式，包括字体大小、颜色、文本对齐方式和文字阴影。最后，我们将容器元素的`display`属性设置为`inline-block`，使其能够自适应文本大小。 这样，我们就创建了一个简单的文字聚光灯效果。您可以根据需要调整样式，以创建更具有个性化的聚光灯效果。 ### 回答2： 要实现文字聚光灯效果，可以使用CSS的linear-gradient属性和clip-path属性结合来实现。具体步骤如下： 1. 首先，创建一个div容器，并给它设置一个合适的宽度和高度。 2. 使用linear-gradient属性，通过设置背景颜色的渐变来实现聚光灯效果。可以将颜色设置为透明度从0%到100%的渐变，以达到透明度逐渐增强的效果。例如： div { /* 聚光灯渐变效果 */ background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%); } 这样就能实现一个从上到下渐变的聚光灯效果。 3. 使用clip-path属性，来裁剪文本的显示区域。通过设置clip-path属性的值为一个圆形或椭圆形的路径，使得只有路径内的内容显示出来，而路径外的内容被隐藏。例如： div { /* 聚光灯裁剪效果 */ clip-path: circle(50% at 50% 50%); } 这样就能实现一个以div容器中心为圆心的圆形聚光灯效果。 通过上述步骤，我们就可以实现文字聚光灯效果。当然，你也可以根据需求调整渐变颜色、路径形状和位置等来获得不同的效果。 ### 回答3： CSS实现文字聚光灯效果可以通过使用文本阴影和渐变背景来实现。下面是一个简单的步骤： 1. 创建一个包含文字的元素。可以是段落(`<p>`)、标题(`<h1>`等)或其他含有文字的元素。 2. 使用CSS来设置文字的样式。可以设置字体、字号、颜色等。 3. 使用CSS的`text-shadow`属性来创建文字的阴影效果。可以设置阴影的位置、模糊半径和阴影的颜色来实现不同的效果。例如： ``` text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); ``` 这将创建一个白色的阴影效果，模糊半径为10像素。 4. 使用CSS的`background-image`属性来创建文字的渐变背景。可以使用`linear-gradient()`函数来创建线性渐变或者`radial-gradient()`函数来创建径向渐变。例如： ``` background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8)); ``` 这将创建一个从透明到白色的线性渐变背景。 5. 最后，使用其他CSS属性来调整文字的布局、对齐方式和大小等，以达到聚光灯效果的设计要求。 希望以上解答对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值