首页 > 其他分享 >三圆点CSS3 loading加载动画特效库

三圆点CSS3 loading加载动画特效库

时间:2024-11-21 11:39:46浏览次数:1  
标签:CSS3 dots loading 圆点 three css div class dot

 

在线预览              插件下载

 

安装

可以通过npm来安装three-dots.css。

npm install three-dots --save

 使用方法

在页面中引入three-dots.css。

<link href="css/three-dots.css" rel="stylesheet">
 HTML结构

然后在你需要添加Loading效果的容器上添加相应的class类即可。

<div class="dot-elastic"></div>   <div class="dot-pulse"></div>   <div class="dot-flashing"></div>   <div class="dot-collision"></div>   <div class="dot-revolution"></div>   <div class="dot-translation"></div>   <div class="dot-typing"></div>   <div class="dot-windmill"></div>   <div class="dot-bricks"></div>   <div class="dot-floating"></div>

可用的class类有:

  • dot-elastic
  • dot-pulse
  • dot-flashing
  • dot-collision
  • dot-revolution
  • dot-carousel
  • dot-typing
  • dot-windmill
  • dot-bricks
  • dot-floating
  • dot-fire
  • dot-spin
  • dot-falling
  • dot-stretching

标签:CSS3,dots,loading,圆点,three,css,div,class,dot
From: https://www.cnblogs.com/mybook000/p/18560298

相关文章

  • Flutter用PageView.builder和bottomNavigationBar做出底部小圆点效果
    import'package:flutter/material.dart';voidmain(){runApp(App());}classAppextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){//TODO:implementbuildreturnMaterialApp(debugShowCheckedModeBanner:fal......
  • CSS3 超实用属性:pointer-events(可穿透图层的鼠标事件)
    1、是什么pointer-events 直译为指针事件,该属性指定在什么情况下某个DOM可以成为鼠标事件的target。简而言之,就是允许/禁止DOM的鼠标事件(click事件、hover事件、mouse事件等鼠标事件)2、具体属性分析用法分析:pointer-events:auto|none|visiblePainted|visibleFill|......
  • 鸿蒙NEXT自定义组件:太极Loading
     【引言】(完整代码在最后面)本文将介绍如何在鸿蒙NEXT中创建一个自定义的“太极Loading”组件,为你的应用增添独特的视觉效果。【环境准备】电脑系统:windows10开发工具:DevEcoStudioNEXTBeta1BuildVersion:5.0.3.806工程版本:API12真机:mate60pro语言:ArkTS、ArkUI......
  • 检测 HTML5\CSS3\JAVASCRIPT 在浏览器的适应情况
    https://www.cnblogs.com/czhyuwj/p/4796690.html CSS3SelectorsTest:这是CSS3.INFO网站提供的css选择器测试页面,它能够详细显示当前浏览器对所有CSS3选择器的支持情况。启动测试,浏览器会自动测验,并已列表的方式显示当前浏览器对所有css3选择器的支持情况  http://tool......
  • 数据可视化CSS3
    可视化-解决方案2D动画-transform坐标系transform-origin3D动画-transform3D旋转-rotateZ、rotateX、rotateY3D旋转-rotate3d3D透视-perspective3D位移-translateX、translateY、translateZ3D位移-translate3d3D缩放-scaleX、scaleY、scaleZ3D缩放-scale3d......
  • css3D变换用法
    文章目录CSS3D变换详解及代码案例一、CSS3D变换的基本概念二、3D变换的开启与景深设置三、代码案例CSS3D变换详解及代码案例CSS3D变换是CSS3中引入的一种强大功能,它允许开发者在网页上创建三维空间中的动画和交互效果。通过CSS3D变换,你可以实现元素的3D位移、旋转......
  • CSS3过渡
     CSS过渡能够做出一些好看动画效果,无需使用Flash动画或JavaScript使用语法:         transition: property   time  speedChange  delayTime,  ...属性:           ①property:过渡的属性         ②time:过渡的时间 ......
  • CSS3中动画的使用animation
    1.基本使用2.其他属性3.复合属性......
  • CSS3实现放大镜效果
    市面上基本上所有的购物平台、商城上的商品详情页,对于商品的图片都是有放大功能。那么这个功能主要是怎么实现的呢?CSS3实现放大镜效果主要依赖于CSS的一些高级特性,如transform、transition和::before伪元素等其实代码并没有多少,这里用了6款静态资源图片作为示例,但是每一款都需要......
  • CSS3实现放大镜效果
    市面上基本上所有的购物平台、商城上的商品详情页,对于商品的图片都是有放大功能。那么这个功能主要是怎么实现的呢?CSS3实现放大镜效果主要依赖于CSS的一些高级特性,如transform、transition和::before伪元素等其实代码并没有多少,这里用了6款静态资源图片作为示例,但是每一款都需......