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文档
猜你喜欢
  • CSS代码怎么实现loading动画效果
    本篇内容介绍了“CSS代码怎么实现loading动画效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果:代码使用了CSS的keyfram...
    99+
    2023-07-04
  • CSS如何实现loading动画效果
    这篇文章主要介绍CSS如何实现loading动画效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:预览代码使用了CSS的keyframes自定义关键帧动画<!DOCT...
    99+
    2024-04-02
  • CSS如何实现一个loading动画效果
    这篇文章主要介绍CSS如何实现一个loading动画效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出...
    99+
    2023-06-08
  • CSS3如何实现loading动画效果
    这篇文章主要为大家展示了“CSS3如何实现loading动画效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS3如何实现loading动画效果”这篇文章吧...
    99+
    2024-04-02
  • 怎么用css3实现loading加载动画效果
    这篇文章主要介绍“怎么用css3实现loading加载动画效果”,在日常操作中,相信很多人在怎么用css3实现loading加载动画效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2024-04-02
  • CSS怎么实现动画移动效果
    这篇文章主要为大家展示了“CSS怎么实现动画移动效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS怎么实现动画移动效果”这篇文章吧。思路首先我们新建一个正方形,用<svg>&l...
    99+
    2023-06-27
  • 怎么样使用纯CSS代码实现冰棍的动画效果
    小编给大家分享一下怎么样使用纯CSS代码实现冰棍的动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   代码解读   ...
    99+
    2024-04-02
  • 怎么使用纯css代码实现赛车的loader动画效果
    这篇文章主要介绍怎么使用纯css代码实现赛车的loader动画效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!   代码解读   定义dom,容器中包含1个.car元素,它的2...
    99+
    2024-04-02
  • CSS怎么实现雨滴动画效果
    这篇文章主要介绍CSS怎么实现雨滴动画效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!玻璃窗今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的。<d...
    99+
    2023-06-08
  • Python+Pygame实现代码雨动画效果
    pygame实现代码雨动画 如视频所示 利用pygame库实现了一个代码呈雨状下落的视觉效果 部分代码如下 import sys import random import py...
    99+
    2024-04-02
  • 怎么用纯CSS3实现页面loading加载动画效果
    小编给大家分享一下怎么用纯CSS3实现页面loading加载动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!  ...
    99+
    2024-04-02
  • 怎么使用纯CSS代码实现一个沙漏的动画效果
    这篇文章主要为大家展示了“怎么使用纯CSS代码实现一个沙漏的动画效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“怎么使用纯CSS代码实现一个沙漏的动画效果”这...
    99+
    2024-04-02
  • 怎么使用纯CSS代码实现文字断开的动画效果
    这篇文章将为大家详细讲解有关怎么使用纯CSS代码实现文字断开的动画效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。   代码解读   定义dom,只有一个元素,元素...
    99+
    2024-04-02
  • CSS动画怎么实现领积分效果
    这篇文章给大家分享的是有关CSS动画怎么实现领积分效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1. 整体思路首先想到基本轮廓是一个地球,周围半圆范围内围绕着好几个闪烁的小星星,然后同时坠落到地球上...
    99+
    2023-06-08
  • css怎么实现弹跳球动画效果
    小编给大家分享一下css怎么实现弹跳球动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   1、定义动画关键帧   对...
    99+
    2024-04-02
  • CSS3代码怎么实现点击放大动画效果
    本篇内容主要讲解“CSS3代码怎么实现点击放大动画效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3代码怎么实现点击放大动画效果”吧!代码如下<!DOCTYPE html...
    99+
    2023-07-04
  • Python如何实现代码雨动画效果
    本篇内容介绍了“Python如何实现代码雨动画效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!代码如下import sysimp...
    99+
    2023-07-04
  • 用CSS3实现的8种Loading动画效果分享
    这篇文章主要讲解了“用CSS3实现的8种Loading动画效果分享”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“用CSS3实现的8种Loading动画效果分...
    99+
    2024-04-02
  • css怎么实现叶子形状loading效果
    本篇内容主要讲解“css怎么实现叶子形状loading效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css怎么实现叶子形状loading效果”吧!本文实例讲...
    99+
    2024-04-02
  • CSS怎么实现多屏复杂动画效果
    本篇内容介绍了“CSS怎么实现多屏复杂动画效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!技巧一、使用a...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作