css实现loading的动画图标

最新推荐文章于 2024-05-30 14:22:46 发布
最新推荐文章于 2024-05-30 14:22:46 发布
阅读量642 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenge1477/article/details/86500374
版权

1、例

<!DOCTYPE html>
<html>
<head>
    <title>this is animation</title>
    <style type="text/css">
        @keyframes topMove{
            0%{
                transform: rotateZ(0);
            }
            50%{
                transform: rotateZ(45deg);
            }
            100%{
                transform: rotateZ(0);
            }
            
        }
        @keyframes bottomMove{
            0%{
                transform: rotateZ(0);
            }
            50%{
                transform: rotateZ(-45deg);
            }
            100%{
                transform: rotateZ(0);
            }
        }
        @keyframes bollMove{
            from{
                left:260px;
                opacity: 0;
            }
            to{
                left:80px;
                opacity: 1;
                
            }
        }

        *{
            margin: 0;
            padding: 0;
        }
        .first{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            position: relative;
            margin: 0 auto;
        }

        .top{
            margin-top: 30px;
            margin-left: 40px;
            width: 0px;
            height: 0px;
            border: 40px solid #fff;
            border-radius: 50%;
            border-right-color: transparent;
            border-bottom-color: transparent;
            position: absolute;
            animation: topMove 2s linear infinite; 
        }
        .bottom{
            margin-top: 30px;
            margin-left: 40px;
            width: 0px;
            height: 0px;
            border: 40px solid #fff;
            border-radius: 50%;
            border-right-color: transparent;
            border-top-color: transparent;
            position: absolute;
            animation: bottomMove 2s linear infinite; 
        }
        .boll{
            width: 30px;
            height: 30px;
            background-color: #fff;
            position: absolute;
            left:260px;
            margin-top: 55px;
            border-radius: 50%;
            animation: bollMove .5s linear infinite;
        }
    </style>
</head>
<body>

<div class="first">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="boll" style="animation-delay: 0.2"></div>
    <div class="boll" style="animation-delay: 0.2"></div>
    <div class="boll" style="animation-delay: 0.2"></div>
</div>
</body>
</html>

 

2、例

<!DOCTYPE html>
<html>
<head>
    <title>this is homeword</title>
    <style type="text/css">
        @keyframes movesecond{
            from{
                transform: rotateZ(0deg);
            }
            to{
                transform: rotateZ(360deg);
            }
        }
        @keyframes movethird{
            0%{
                opacity: 0.2;
                transform: scaleX(0.5) scaleY(0.5);

            }
            50%{
                opacity: 1;
                transform: scaleX(1) scaleY(1);

            }
            100%{
                opacity: 0.2;
                transform: scaleX(0.5) scaleY(0.5);
            }
        }
        *{
            margin: 0;
            padding: 0;
        }
        .first{
            width: 300px;
            height: 300px;
            position: relative;
            margin: 0 auto;
            background-color: skyblue;
        }
        .first .second{
            margin-left: 80px;
            margin-top: 80px;
            width: 100px;
            height: 100px;
            border: 10px solid #fff;
            background-color: transparent;
            border-radius: 50%;
            border-top-color: transparent;
            border-bottom-color: transparent;
            animation:movesecond 2s linear infinite; 
            position: absolute;
        }
        .first .third{
            width: 0px;
            height: 0px;
            border: 20px solid #fff;
            border-radius: 50%;
            position: absolute;
            margin-left: 120px;
            margin-top: 115px;
            animation: movethird 2s linear infinite;
        }

    </style>
</head>
<body>

<div class="first">
    <div class="second"></div>
    <div class="third"></div>
</div>
</body>
</html>

 

3、例

<!DOCTYPE html>
<html>
<head>
    <title>this is case2</title>
    <style type="text/css">
        @keyframes move1{
            form{
                transform: rotateZ(0deg);
            }    
            to{
                transform: rotateZ(360deg);
            }
        }
        *{
            margin: 0;
            padding: 0;
        }
        .first{
            width: 300px;
            height: 300px;
            position: relative;
            margin: 0 auto;
            position: relative;
            margin: 0 auto;
            background-color: skyblue;
        }
        .first .second{
            width: 100px;
            height: 100px;
            background-color: transparent;
            border: 10px solid #fff;
            border-radius: 50%;
            position: absolute;
            opacity: 0.5
        }
        .first .third{
            width: 100px;
            height: 100px;
            background-color: transparent;
            border: 10px solid #fff;
            border-radius: 50%;
            border-left-color: transparent;
            border-right-color: transparent;
            border-top-color: transparent;
            position: absolute;
            animation: move1 2s linear infinite;
        }

    </style>
</head>
<body>
<div class="first">
    <div class="second"></div>
    <div class="third"></div>
</div>
</body>
</html>

 

 

 

wenge1477
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用 icon 图标库 自定义loading
weixin_44258359的博客
12-09 702
盒子包裹 需要的 图标和文字提示 <div class="player-loading"> <div class="loading-spinner"></div> <p class="loading-bot-toast">正在加载中</p> </div> 在icon图标库下载需要的图标 icon图库地址阿里矢量图库 文字搜索需要的图标名称即可 例如 loading、 人物、 电视、 房子 .loading-spinn
CSS实现loading动画
qq_44417271的博客
11-11 752
<template> <view class="container" v-show="loadingShow"> <view class="load"> <text></text> <text></text> <text></text> <text></text> <text></text> <text&g
加载动态图标 loading icon
01-05
页面加载时等待显示的图标，增加页面效果。欢迎下载
CSS实现loading加载动画
weixin_43541158的博客
04-25 1086
CSS实现loading加载动画效果
网页动态加载（loading）GIF图标
最新发布
富朝阳的博客
05-30 1344
网页加载图标 GIF动态图标 loading图标 加载延迟图标 加载过度图标
自定义加载中Icon Spin——表格的loading和页面的loading
Zeroliuyun的博客
12-28 460
【代码】自定义加载中Icon Spin——表格的loading和页面的loading。
[Selenium]怎样等待元素出现之后再消失，譬如Loading icon
weixin_30247781的博客
05-20 689
界面上有些元素是要先等它出现，再等它消失，譬如loading icon 这个是等多个loading icon出现后消失 /** * Wait for loading icon disappear in dialog and Widgets * @author jz */ public void waitForLoadingIconDisappearInDialog(W...
CSS3 实现 Loading 动画
Hwaphon
09-10 6654
最近本人正在极客学院学习 HTML5 系列课程，这么课程涵盖的内容也是非常的多，虽然内容十分简单容易理解，但是非常难以记忆，比如 CSS3 的一些属性。今天所要介绍的 CSS3 Loading 动画也是极客学院里所介绍的内容，感兴趣的同学也可以前去观看视屏。 Loading one第一种加载动画的效果，就是这么一个图在不停的转啊转，动态图就不在这里展示了，太过于麻烦了，想看效果的同学学习之后可以自己
纯CSS3 Loading动画图标.rar_css loading 动画_nounva4_纯CSS3 Loading动画图标_蓝
09-15
纯CSS3 Loading动画图标是一种利用CSS3特性实现的动态加载效果，主要应用于网站或应用的加载界面，以展示数据正在加载的过程，同时增加用户界面的交互性和视觉吸引力。本资源包含10组不同设计风格的蓝色Loading动画...
纯css loading动画
11-08
纯CSS Loading动画是一种在网页加载过程中展示的交互元素，它使用CSS（层叠样式表）技术来创建动态效果，向用户表明页面正在加载。这种动画通常由简单的几何形状和过渡效果组成，不需要JavaScript或者额外的图像资源...
10组蓝色风格的纯CSS3 Loading动画图标
11-24
【标题】：“10组蓝色风格的纯CSS3 Loading动画图标” 这是一份关于使用CSS3技术创建的蓝色风格Loading动画图标的资源集合。在网页设计中，Loading动画图标是必不可少的元素，它能告知用户页面正在加载或处理数据，...
loading图标大全
05-13
...............................................................
各种各样的loading小图标
03-25
各种各样的loading小图标，gif格式，png格式
载入图标(loading)
09-07
各种载入图标，gif格式，适合各种页面效果
loading-加载图标大全
03-06
网页设计常用ICON小图标-加载Loading-加载图标大全
CSS3加载loading图标动画.zip
05-14
此外，可能还包含HTML文件用于展示这些动画效果，以及可能的图片资源，帮助构建动画图标的基础图形。 通过研究和实践这些CSS3加载动画，开发者可以提升对CSS3动画的理解，掌握创建高性能、低延迟加载图标的技巧。...
超简易的SVG/CSS3 Loading加载动画图标
04-16
解压密码：RJ4587 今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标，和之前分享的SVG实现的一组超华丽Loading加载动画相比，这组Loading动画更见简单，它主要由圆环形和柱形两种样式组成，可以将...
CSS3实现10种Loading效果
dgqvhtlwq472235338的博客
06-19 351
原文：http://www.open-open.com/code/view/1436164419895 昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记…… 第1种效果： 代码如下： <div class="loading"> <span></span> ...
css实现多个loading动画效果
温情
12-13 2698
在开发中，为了提高用户体验，通常在加载数据的时候会给一个。根据序号查看代码，尾部有整合代码。提示，这里分享几个简单的。
css3遮罩loading
07-10
### 回答1： CSS3遮罩loading是一种常见的网页加载效果，通过使用CSS3的特性来实现。下面是一种简单的实现方式： 首先，在HTML文件中创建一个容器元素，用于包裹loading效果的内容。可以使用一个div元素，设置好宽高和位置。 接着，在CSS文件中给这个容器元素添加样式。可以使用position属性将其定位在页面中心，然后设置背景色和透明度，使其成为一个半透明的遮罩。 然后，在容器元素中添加一个loading效果。可以使用伪类:before或:after来创建一个圆形或旋转的元素。可以使用CSS3的keyframes来设置旋转动画，或者使用transition来实现平滑的过渡效果。 最后，使用JavaScript来监听页面的加载事件，一旦页面的内容加载完毕，就移除这个遮罩层，展示出页面的内容。 总结来说，CSS3遮罩loading是通过使用CSS3的特性来创建一个带有loading效果的遮罩层，用于页面加载时展示loading状态，给用户一个良好的体验。在实现过程中，需要结合HTML、CSS和JavaScript来完成。这种loading效果简单实用，可以根据需求进行灵活的样式和动画设置，提升用户体验。 ### 回答2： CSS3遮罩loading指的是使用CSS3技术实现的一种页面加载动画效果。主要通过遮罩层和旋转动画来展示加载的过程。 首先，我们可以使用一个遮罩层来覆盖整个页面，遮挡住用户的操作，防止用户在加载过程中的干扰。通过设置遮罩层的宽度和高度为100%，使其覆盖整个页面。 接下来，我们可以使用CSS3中的旋转动画来表示加载的过程。通过设置一个旋转的图标（例如一个圆圈或者一个齿轮）在遮罩层的中央，并给这个图标设置一个旋转的动画效果。在CSS3中，我们可以使用关键帧（@keyframes）语法来定义一个旋转动画。通过设置动画的起始状态和结束状态、旋转的角度以及动画的持续时间和重复次数等属性，就可以实现一个旋转的加载动画效果。 最后，加载完成后，可以通过JavaScript或者其他交互方式将遮罩层和加载动画移除，显示真正的页面内容。 总的来说，CSS3遮罩loading通过遮罩层和旋转动画来展示加载过程，使用户在等待加载完成时有了一个视觉的反馈，提升用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值