iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >CSS代码怎么实现loading动画效果
  • 477
分享到

CSS代码怎么实现loading动画效果

2023-07-04 22:07:19 477人浏览 泡泡鱼
摘要

本篇内容介绍了“CSS代码怎么实现loading动画效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果:代码使用了CSS的keyfram

本篇内容介绍了“CSS代码怎么实现loading动画效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

效果:

CSS代码怎么实现loading动画效果

代码

使用了CSS的keyframes自定义关键帧动画

<!DOCTYPE html>  <html lang="en">      <head>        <title>Loading</title>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1">        <style>            div#preload {    margin: auto;    position: fixed;    width: 100%;    height: 100%;    background-color: #fff;    z-index: 9999999}div#preload>img {      position: absolute;    top: 50%;    left: 50%;    transfORM: translate(-50%,-50%);    -WEBkit-transform: translate(-50%,-50%);    -moz-transform: translate(-50%,-50%);    -ms-transform: translate(-50%,-50%);    -o-transform: translate(-50%,-50%)}div#preload .cssload-loader {      position: absolute;    left: 0;    right: 0;    margin: auto;    width: 62px;    height: 62px;    top: 50%;    margin-top: -31px;    border-radius: 50%;    -o-border-radius: 50%;    -ms-border-radius: 50%;    -webkit-border-radius: 50%;    -moz-border-radius: 50%;    perspective: 780px}div#preload .cssload-inner {      position: absolute;    width: 100%;    height: 100%;    box-sizing: border-box;    -o-box-sizing: border-box;    -ms-box-sizing: border-box;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    border-radius: 50%;    -o-border-radius: 50%;    -ms-border-radius: 50%;    -webkit-border-radius: 50%;    -moz-border-radius: 50%}div#preload .cssload-inner.cssload-one {      left: 0;    top: 0;    animation: cssload-rotate-one 1.15s linear infinite;    -o-animation: cssload-rotate-one 1.15s linear infinite;    -ms-animation: cssload-rotate-one 1.15s linear infinite;    -webkit-animation: cssload-rotate-one 1.15s linear infinite;    -moz-animation: cssload-rotate-one 1.15s linear infinite;    border-bottom: 3px solid #000}div#preload .cssload-inner.cssload-two {      right: 0;    top: 0;    animation: cssload-rotate-two 1.15s linear infinite;    -o-animation: cssload-rotate-two 1.15s linear infinite;    -ms-animation: cssload-rotate-two 1.15s linear infinite;    -webkit-animation: cssload-rotate-two 1.15s linear infinite;    -moz-animation: cssload-rotate-two 1.15s linear infinite;    border-right: 3px solid #000}div#preload .cssload-inner.cssload-three {      right: 0;    bottom: 0;    animation: cssload-rotate-three 1.15s linear infinite;    -o-animation: cssload-rotate-three 1.15s linear infinite;    -ms-animation: cssload-rotate-three 1.15s linear infinite;    -webkit-animation: cssload-rotate-three 1.15s linear infinite;    -moz-animation: cssload-rotate-three 1.15s linear infinite;    border-top: 3px solid #000}@keyframes cssload-rotate-one {    0% {        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)    }    100% {        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)    }}@-o-keyframes cssload-rotate-one {    0% {        -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)    }    100% {        -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)    }}@-ms-keyframes cssload-rotate-one {    0% {        -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)    }    100% {        -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)    }}@-webkit-keyframes cssload-rotate-one {    0% {        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)    }    100% {        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)    }}@-moz-keyframes cssload-rotate-one {    0% {        -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)    }    100% {        -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)    }}@keyframes cssload-rotate-two {    0% {        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)    }    100% {        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)    }}@-o-keyframes cssload-rotate-two {    0% {        -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)    }    100% {        -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)    }}@-ms-keyframes cssload-rotate-two {    0% {        -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)    }    100% {        -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)    }}@-webkit-keyframes cssload-rotate-two {    0% {        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)    }    100% {        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)    }}@-moz-keyframes cssload-rotate-two {    0% {        -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)    }    100% {        -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)    }}@keyframes cssload-rotate-three {    0% {        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)    }    100% {        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)    }}@-o-keyframes cssload-rotate-three {    0% {        -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)    }    100% {        -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)    }}@-ms-keyframes cssload-rotate-three {    0% {        -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)    }    100% {        -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)    }}@-webkit-keyframes cssload-rotate-three {    0% {        -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)    }    100% {        -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)    }}@-moz-keyframes cssload-rotate-three {    0% {        -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)    }    100% {        -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)    }}        </style>    </head>    <body>    <div id="preload">                    <div class="cssload-loader">                <div class="cssload-inner cssload-one"></div>                <div class="cssload-inner cssload-two"></div>                <div class="cssload-inner cssload-three"></div>            </div>    </div>    </body></html>

css的三种引入方式

1.行内样式,最直接最简单的一种,直接对HTML标签使用style=""。

2.内嵌样式,就是将CSS代码写在之间,并且用进行声明。

外部样式,其中链接样式是使用频率最高,最实用的样式,只需要在之间加上就可以了。其次就是导入样式,导入样式和链接样式比较相似,采用@import样式导入CSS样式表,不建议使用。

“CSS代码怎么实现loading动画效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: CSS代码怎么实现loading动画效果

本文链接: https://www.lsjlt.com/news/347928.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • C++ 生态系统中流行库和框架的贡献指南
    作为 c++++ 开发人员,通过遵循以下步骤即可为流行库和框架做出贡献:选择一个项目并熟悉其代码库。在 issue 跟踪器中寻找适合初学者的问题。创建一个新分支,实现修复并添加测试。提交...
    99+
    2024-05-15
    框架 c++ 流行库 git
  • C++ 生态系统中流行库和框架的社区支持情况
    c++++生态系统中流行库和框架的社区支持情况:boost:活跃的社区提供广泛的文档、教程和讨论区,确保持续的维护和更新。qt:庞大的社区提供丰富的文档、示例和论坛,积极参与开发和维护。...
    99+
    2024-05-15
    生态系统 社区支持 c++ overflow 标准库
  • c++中if elseif使用规则
    c++ 中 if-else if 语句的使用规则为:语法:if (条件1) { // 执行代码块 1} else if (条件 2) { // 执行代码块 2}// ...else ...
    99+
    2024-05-15
    c++
  • c++中的继承怎么写
    继承是一种允许类从现有类派生并访问其成员的强大机制。在 c++ 中,继承类型包括:单继承:一个子类从一个基类继承。多继承:一个子类从多个基类继承。层次继承:多个子类从同一个基类继承。多层...
    99+
    2024-05-15
    c++
  • c++中如何使用类和对象掌握目标
    在 c++ 中创建类和对象:使用 class 关键字定义类,包含数据成员和方法。使用对象名称和类名称创建对象。访问权限包括:公有、受保护和私有。数据成员是类的变量,每个对象拥有自己的副本...
    99+
    2024-05-15
    c++
  • c++中优先级是什么意思
    c++ 中的优先级规则:优先级高的操作符先执行,相同优先级的从左到右执行,括号可改变执行顺序。操作符优先级表包含从最高到最低的优先级列表,其中赋值运算符具有最低优先级。通过了解优先级,可...
    99+
    2024-05-15
    c++
  • c++中a+是什么意思
    c++ 中的 a+ 运算符表示自增运算符,用于将变量递增 1 并将结果存储在同一变量中。语法为 a++,用法包括循环和计数器。它可与后置递增运算符 ++a 交换使用,后者在表达式求值后递...
    99+
    2024-05-15
    c++
  • c++中a.b什么意思
    c++kquote>“a.b”表示对象“a”的成员“b”,用于访问对象成员,可用“对象名.成员名”的语法。它还可以用于访问嵌套成员,如“对象名.嵌套成员名.成员名”的语法。 c++...
    99+
    2024-05-15
    c++
  • C++ 并发编程库的优缺点
    c++++ 提供了多种并发编程库,满足不同场景下的需求。线程库 (std::thread) 易于使用但开销大;异步库 (std::async) 可异步执行任务,但 api 复杂;协程库 ...
    99+
    2024-05-15
    c++ 并发编程
  • 如何在 Golang 中备份数据库?
    在 golang 中备份数据库对于保护数据至关重要。可以使用标准库中的 database/sql 包,或第三方包如 github.com/go-sql-driver/mysql。具体步骤...
    99+
    2024-05-15
    golang 数据库备份 mysql git 标准库
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作