css3 加载loading图标实现

最新推荐文章于 2024-01-29 11:53:25 发布

VIP文章 Maci_yera

最新推荐文章于 2024-01-29 11:53:25 发布

阅读量7.7k

点赞数 2

分类专栏： css css3动画文章标签： css3

本文链接：https://blog.csdn.net/maci_yera/article/details/77612209

版权

常见的loading图标，大概的样子是这样：（录制的gif，比较卡）
录制的gif比较卡
看到大牛的面试中被问到这个问题，我就想自己动手实现一下。我们来用20行代码实现一下。
代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>加载效果</title>
    <style type="text/css">
        .loading{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 5px solid #BEBEBE;
            border-left: 5px solid #498aca;
            animation: load 1s linear infinite;
            -moz-animation:load 1s linear infinite;
            -webkit-animation: load 1s linear infinite;
            -o-animation:load 1s linear infinite;
        }
        @-webkit-keyframes load
        {
            from{
    -webkit-transform:rotate(0deg);}
            to{
    -webkit-transform:rotate(360deg);}
        }
        @-moz-keyframes load
        {
            from{
    -moz-transform:rotate(0deg);}
            to{
    -moz-transform:rotate(360deg);}
        }
        @-o-keyframes load
        {
            from{
    -o-transform:rotate(0deg);}
            to{
    -o-t

最低0.47元/天解锁文章

Maci_yera

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
css3 加载loading图标实现

常见的loading图标，大概的样子是这样：（录制的gif，比较卡）看到大牛的面试中被问到这个问题，我就想自己动手实现一下。我们来用20行代码实现一下。代码如下：<!DOCTYPE html><html><head> <title>加载效果</title> <style type="text/css"> .loading{ wi
复制链接

扫一扫